How do i implement functionality of showing skeleton before axios request returns data?

[Abdullah Sohail]

Newbie here , i want to show skeleton in place of content till the get request returns content this usecase is basically perhaps replication of showing a loading spinner before content loads but i was wondering if my approach is correct here’s what i am doing:
I dispatch action on the app.vue created hook to asynchronously fetch data from api and then mutate the state to populate some articles.
Then in Index.vue component i call the getter to get the articles but the problem is the getter returns Observer object and doesnt return articles and this makes sense because the api request takes time to return data so here’s how i get around this problem:

//Index.vue
<q-card class="card-height-lg" flat square>
          <q-skeleton v-if="!dataFetched" class="quasar-skeleton-lg" square>{{articles}}</q-skeleton>
          <span v-else>{{articles[0].content}}</span>
          <span></span>
          <span></span>
        </q-card>

//script section
export default {
  data(){
    return{
      dataFetched:false
    }
  },
  computed:{
    currentFormatDate:function(){
      var unformated=new Date();
      var day=unformated.toDateString().split(' ')[0];
      return unformated.toDateString().replace(day,`${day},`);   
    },
    articles:function(){
      var articles=this.$store.getters.getTopAroundTheGlobe;
      if(articles.length>0)
      {
        this.dataFetched=true;
        return articles;
        console.log(articles);
      }
        
    }
  }
}

[Abdullah Sohail]

This post is deleted!