How to continue loading page whilst state dispatch is running?

Viewed 80
<script>
import { mapState } from 'vuex';

export default {
  layout: 'default',

  async asyncData({store}) {
    await store.dispatch('loadPrescriptions')
  },
  
  /**
   * Create State Mapping
   */
  computed: {
    ...mapState({
      prescriptions: 'prescriptions',
    })
  }
}
</script>

I'm currently working on the above, in which a dispatch is ran to:

async loadPrescriptions({ commit }) {
  let response = await getApi(`/prescriptions`, this.$axios)
  let prescriptions = response.data

  commit('SET_PRESCRIPTIONS', prescriptions);
},

However, this query takes around 30s to complete, as it's live data and a lot of it.

Currently, until that data completes 200, the page doesn't load and is white screen.

I want to continue paining the page, and display a loading message until the query complete.

I'm not sure where to start, I've tried changing everything to static, and client render.

0 Answers
Related