Vue loading screen while component loads

1

I am using Vue cli and vuex and I have a loading componenet I would like to display while the data for each user profile card loads. The loading component looks like this:

<template>
  <div :class="{ loader: true, fadeout: !isLoading }">
<div id="load" >  Loading...</div>
  </div>
</template>

<script>
export default {
  name: "LoadingScreen",
  props: ["isLoading"]
};
</script>

The user profile looks like:

<div class="top"  v-for="(item, index) in arrays" :key="item.id" v-bind:id="item.name">
    <div>  <p> {{ item.name }}</p> </div>

       <div class="wrapper" >
            <div class="a"><rate-displayer :rates="item.Info" /></div>
            <div class="b"><rate-displayer :rates="item.RR" /></div>

The rate displayer loops through an array in vuex showing each item for 5 seconds.
The rate displayer component looks like this:

<template>
  <div class="rate" v-if="rate">{{rate}}</div>
</template>
<script>
 export default {
   name: "RateDisplayer.vue",
        props: {
            rates: {
                required: true,
            }
        },
        data() {
            return {
                interval: 5000,
                rate: false,
                arrays: [ {Info: [60, 90, 75, 86] }]
                    }
                 },
    mounted(){ 
        this.nextOrStop(-1) },
    methods: { 
      nextOrStop(current)
      {
         if(current === this.rates.length-1) {  return }
         setTimeout( () => {
             const index = current+1;
             this.rate = this.rates[index];
             this.nextOrStop(index)
             }, this.interval)
    },
    },
 }
  </script>

I would like the loading component which is a loading screen to display while the rate displayer loops through the array but I’m not sure how to go about this. Any help would be appreciated, thanks!