How to make a preloader in Vue?

Question

Vue.js

How to catch the moment when all ajax requests are sent and responses are received in order to change the value of showPreloader from false to true and back?
I am using axios. I'm doing a SPA, and when navigating through the pages, the showPreloader value should change to true until I get all the responses from the sent requests to the API. So it should be one-time, when created.

Answer 1

If there are many operations and they are asynchronous, you can use the Locking Pool pattern:

const store = {
  state: {
    lockingPool: 0
  },
  getters: {
    isUiLocked: state => state.lockingPool > 0
  },
  mutations: {
    lockUi: state => state.lockingPool++,
    unlockUi: state => state.lockingPool--
  },
  actions: {
    async someAction ({ commit }) {
      commit('lockUi')
      const { data } = await http.get('/some-url')
      commit('unlockUi')
    }
  }
}