vue loading indicator?

by szal

HTML

<div id="app">
 <div v-show="isLoading" id="hey" ref="hey">Loading...</div>
<button @click="loadIt()">Load it</button>
<div v-if="done">
Done
</div>
</div>

Vue

new Vue({
  el: "#app",
  data: {
   isLoading: false,
   done: false
  },
  methods: {
  	loadIt() {

      this.isLoading = true
      this.$forceUpdate() // don't think this matters
      this.$nextTick(() => {
        let width = this.$refs.hey.width
        for (var i = 1; i<40000000; ++i){
        	this.done = !i
        }
        this.done = true
        this.isLoading = false
      })
		}
  }
})