Using Loading plugin



  • 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() ?



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

Log in to reply