In my app, my preloader icon doesnt seem to go away when I click on a button which redirects to a new page. Since I am new to Vue, what could I possibly do to be able to have the icon go away once the page rerenders?
<template>
<div class="page-loader" v-if="!isloaded">
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
<div class="cube"></div>
</div>
</template>
<script>
export default {
data: () => {
return {
isloaded: false
}
},
mounted() {
document.onreadystatechange = () => {
if (document.readyState == "complete") {
this.isloaded = true;
}
}
},
}
</script>
the mounted seems to work initially but then after that it doesnt work once redirecting on the page?
I think you don't need the onreadystatechange as the completed ready state isn't related if the data has been fetched or not, To stop the preloader after fetching data from API, It would use the created lifecycle.
Ex:
data() {
return {
isloaded: false,
data: null,
}
},
async created() {
// any fetch method ( fetch or axios )
const response = await fetch('API_URL')
const data = await response.json()
// set the data
this.data = data;
// here we ensure that data fetched, we can stop preload
this.isloaded = true;
},