The next thing we want to do is provide a way to know if the loading animation should be displayed. Since we could potentially have multiple requests, we are going to use a numeric counter instead of a Boolean--remoteDataLoading that we already declared in the data hook. Each time a request is made, we increment the counter, and when it is complete we decrement the counter. This means if it is equal to zero no request is currently pending, and if it is greater or equal to one we should display a loading animation:

1. Add the two statements incrementing and decrementing the remoteDataLoading counter in the fetchResource method:

      async fetchResource (key, url) {
        this.$data.remoteDataLoading++
        try {
          this.$data[key] = await this.$fetch(url)
        } catch (e) {
          console.error(e)
        }
        this.$data.remoteDataLoading--
      },

2. To make our life easier when using the mixin, let's add a computed property called remoteDataBusy that will be true when we need to display the loading animation:

      computed: {
        remoteDataBusy () {
          return this.$data.remoteDataLoading !== 0
        },
      },

3. Back to our FAQ component, we can now remove the loading property, change the v-if expression for the Loading component, and use the remoteDataLoading computed property:

      <Loading v-if="remoteDataBusy" />

You can try refreshing the page to see the loading animation displayed before the data is retrieved.