'How to continue loading page whilst state dispatch is running?

<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.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source