Retours et chargement

Squelette

nouveauClasses hb-skeleton hb-skeleton--text hb-skeleton--block hb-skeleton--circle hb-skeleton-pulseVuetify 2 v-skeleton-loader type="list-item-two-line"Vuetify 3 v-skeleton-loader

Quand l'utiliser

Pendant le premier chargement d'une carte ou d'une liste, à la place du contenu, dans sa forme : une ligne de titre, une ligne de texte, un bloc pour un graphique, un cercle pour un avatar. hb-skeleton-pulse sur le conteneur y fait passer un balayage lumineux ; sans lui, le squelette est statique (état vide d'une liste).

Code

<div class="hb-card hb-card-body hb-skeleton-pulse" style="max-width:420px">
  <div class="hb-row" style="flex-wrap:nowrap;margin-bottom:var(--space-3)"><span class="hb-skeleton hb-skeleton--circle"></span><div style="flex:1"><span class="hb-skeleton hb-skeleton--text" style="width:50%"></span><span class="hb-skeleton"></span></div></div>
  <span class="hb-skeleton hb-skeleton--block"></span>
  <span class="hb-skeleton hb-skeleton--text" style="margin-top:var(--space-3)"></span>
  <span class="hb-skeleton"></span>
</div>

Règles

Autant de lignes que le contenu en aura (trois lignes pour une liste de trois), pour éviter le saut à l'arrivée.
Un squelette ne remplace pas un contenu qui a déjà été affiché : au rechargement, on garde l'ancien contenu et on montre une barre hb-progress--busy.
prefers-reduced-motion coupe le balayage.