Skeleton Squelette
Introduction
Le composant Skeleton est un élément de substitution haute performance indiquant qu'un contenu est en cours de chargement. En rendant des espaces géométriques simulant la mise en page, il évite les sauts de contenu (CLS) pendant le chargement des données distantes.
Le composant prend en charge différentes formes géométriques (colonnes de texte, blocs carrés, avatars circulaires) ainsi que des boucles d'animation responsives (comme le halo ou la pulsation) directement via la configuration visuelle.
Usage
Vous pouvez construire des états de maquette pour cartes, profils et listes comme suit :
1. Espace réservé de bloc texte multilingue
Simule un paragraphe ou un champ de description en attendant le texte de l'article. Rend des colonnes empilées avec une pulsation subtile automatique.
{
"type": "skeleton",
"shape": "text",
"noOfLines": 3,
"variant": "pulse"
}
2. Espace réservé d'avatar circulaire
Rend une forme circulaire correspondant aux photos de profil ou icônes d'avatar. Combinez avec des squelettes de texte pour simuler des en-têtes utilisateur.
{
"type": "skeleton",
"shape": "circle",
"variant": "pulse"
}
3. Conteneur boîte à reflet (maquette de carte)
Un conteneur rectangulaire avec animation de reflet diagonal lumineux, idéal pour cartes média ou bannières.
{
"type": "skeleton",
"shape": "box",
"variant": "shine"
}
4. Bascule de contenu à l'état chargé
Une fois les données client chargées, loaded: true révèle instantanément les blocs enfants (comme un titre ou une carte réelle) et arrête le fond de substitution.
{
"type": "skeleton",
"loaded": true,
"children": [
{
"blockType": "heading",
"text": "Account Connected",
"size": "sm"
},
{
"blockType": "text",
"content": "API key sync complete."
}
]
}
Account Connected
API key sync complete.
Props
| Propriété | Type de champ CMS | Défaut | Description / options prises en charge |
|---|---|---|---|
Forme (shape) | select | "box" | Format géométrique de la ressource. • Options : "box" (cartes/images), "circle" (avatars), "text" (colonnes de paragraphe). |
Variante d'animation (variant) | select | "pulse" | Style d'animation. • Options : "pulse" (halo progressif), "shine" (reflet diagonal), "none" (remplissage statique). |
Nombre de lignes (noOfLines) | number | 3 | Nombre de colonnes quand shape: "text". |
État chargé (loaded) | boolean | false | Si true, ignore le masque et affiche les enfants. |
Blocs enfants (children) | list | - | Composants du page builder masqués jusqu'à loaded: true. |
Architecture Notes
- Zéro décalage de mise en page : Les paramètres géométriques (hauteur/largeur CSS grid) sont parsés côté serveur avant l'hydratation, préservant les limites proportionnelles et évitant le CLS.
- Reflet accéléré GPU : Les halos et pulsations utilisent des transforms CSS performants, garantissant 60fps même sur mobile bas de gamme.
- Mapping dynamique : Envelopper des composants avec Skeleton permet de récupérer des flux client de façon asynchrone, transitionnant sans couture des espaces aux états visibles.