what is the best way to use vuetify skeleton on nuxt

Question

i'm kinda new to vue, nuxt and vuetify and their aspects. i'm working on a nuxt project with vuetify and wanna use its skeleton loader but it's kinda messy. right now i use this pattern template:

<v-skeleton-loader :loading="isLoading" type"card">
    <mycomponent />
</v-skeleton-loader>

script:

import skeleton from '@plugins/mixins/skeleton.js
export default {
    mixins:[skeleton]
}

skeleton.js :

export default{
    data(){
        return{
            loading: null
        }
    },
    computed:{
        isLoading(){
            return this.loading
        }
    },
    created(){
        this.loading = true
    },
    mounted(){
        this.loading = false
    }
}

when i first used it it was working perfectly. i had a static page and each of its components had their own skeleton and every time i loaded the page it would show their skeleton until they were loaded. BUT.... as i started using this pattern on different pages i found out that it has many flaws!!

it only show skeleton when page is refreshed!
wont show when i add component or data to page! for example an axios call to get the product
it wont work when changing between routes
and so on ...

So, my question is, What's the best and practical way to use skeleton loader! i had a page with a v-for loop through a component and the component had it's own skeleton in its template. it only show skeleton on refresh! like this:

<div v-for="i in 10" :key="i">
    <mycomp />
</div>

mycomp:

<v-skeleton-loader :loading="isLoading" type"card">
    // components html codes
</v-skeleton-loader>

lightmyfire lightmyfire · Accepted Answer · 2020-08-19T14:29:39

I would you suggest to create skeleton component. And in main component most of apps do this stuff, where the amount of skeleton is fixed or limited by pagination:

<template v-if="loading">
  <skeleton v-for="i in 10" :key="i" />
</template>
<template v-else>
  <div v-for="item in items" :key="item.id">
    {{ item }}
  </div>
</template>

what is the best way to use vuetify skeleton on nuxt

1 Answers