Using Loading plugin

[gkentsidis]

Can someone please help me on how to use the ‘Loading’ plugin? I have a Layout that routes to some pages. I want to show a spinner when loading the app layout and another one when loading each page (on-demand). Where do I call this.$q.loading.show() and hide() ?

[CristalT]

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()
  }
}