How to handle loading state in quasar

[Gorgc]

I want to show loading with spinner and logo for a few seconds when rendering a page, then the content of the page with show after that. How can i achieve this?

[beets]

@gorgc One way is to modify App.vue to something like:

<template>
  <div id="q-app">
    <router-view v-if="ready" />
    <q-spinner
      v-else
      color="primary"
      size="3em"
      />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'App',
  computed: {
    ...mapState('my-module', ['ready']),
  }
}
</script>

Then, when your app is ready, change the ready variable in vuex.

[Gorgc]

@beets how do i detect whether my app is ready or not and change the ready state in vuex?

[dobbel]

@gorgc

how do i detect whether my app is ready or not

You can use the mounted hook on a page component. See:

https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

and change the ready state in vuex?

You will have to look up how vuex works.

[Gorgc]

@dobbel ok i got it, thank you everyone for the great help