JSFiddle - React, Tailwind, and code Playground
HTML
<div id="vue">
<div v-if="loading">
Loading
</div>
<loader @start="loading = true" @finish="loading = false"/>
</div>
JavaScript
Vue.component('loader',{
template:`<button @click="load">Load</button>`,
methods:{
load(){
$emit("start");
this.$nextTick(()=>{
requestAnimationFrame(()=>{
requestAnimationFrame(()=>{
const time = Date.now()
for(let i = 0; i < 10 ** 9; i++){
//do slow stuff
}
console.log(Date.now() - time)
this.loading = "false";
})
})
})
}
}
})
new Vue({
el:'#vue',
data(){
return {
loading:false
}
}
})