Skeleton Loading Guide

Jump to bottom

Karnando Sepryan edited this page Oct 28, 2019 · 1 revision

set boolean data isLoading to your component

to display skeleton list item, place this

<div v-if="isLoading">
  <ListItem v-for="n in 4" v-bind:key="n" :loading="isLoading"></ListItem>
</div>

add this for your real data from backend

<div v-if="!isLoading">
  <ListItem v-for="data in datas" v-bind:key="data">
    <template #title></template>
    <template #info></template>
    <template #content></template>
    <template #actions></template>
  </ListItem>
</div>