I recently installed the vue-element-loading package and added its component to my page.vue:
<vue-element-loading :active="isActive" :is-full-screen="true"/>
After adding a variable to my data:
data () {
return {
isActive: false,
}
}
I then set isActive to true after the page finishes loading:
async created () {
this.isActive = true
await this.fetchData()
this.isActive = false
}
The purpose of this setup was to display the loader until the axios get request is successful. However, I'm facing an issue where the loader appears for only a fraction of a second before disappearing.
Below is the fetchData method that is causing the problem:
fetchData () {
axios.get(globalConfig.OFFERS_URL)
.then((resp) => {
this.offersData = resp.data
console.log(resp)
})
.catch((err) => {
console.log(err)
})
},