Do you have ajax requests in each page?
Loading spinners are great as long as you have to wait for asynchronous data loads. So you can call this.$q.loading.show() before an async function, promise or callback and this.$q.loading.hide() after it resolves. For example in a promise:
this.$q.loading.show()
new Promise(resolve => {
setTimeout(() => {
resolve()
}, 3000)
}).then(() => {
this.$q.loading.hide()
})
If the asynchronous data is called entering at a page, you may call this.$q.loading.show() into created hook and hide it after initialization:
export default {
name: 'App',
data () {
return {
data: []
}
},
methods: {
getContent () {
return this.$axios.get('content').then(res => res.data)
}
},
created: async function () {
this.$q.loading.show()
this.content = await this.getContent()
this.$q.loading.hide()
}
}
