Skeleton
Espace réservé visuel utilisé pour représenter le chargement du contenu tout en préservant la structure de la mise en page.
Préserver la mise en page pendant le chargement du contenuLien vers la section
Les Squelette Un composant est un espace réservé visuel utilisé pendant les états de chargement.
Il aide:
- préserver la structure de mise en page
- réduire la mise en page
- améliorer les performances perçues
- communiquer que le contenu est attendu bientôt
- garder les surfaces du produit stables pendant les charges de données
Le squelette est un pure UI primitive. Il rend les formes et ne possède aucune logique de chargement, de récupération ou d'async.
Idée de base
Le squelette montre la forme du contenu qui arrive. Ce n'est pas un message, une explication ou un état d'erreur.
ImportationLien vers la section
import { Skeleton, type SkeletonProps } from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez Skeleton pour remplacer temporairement le contenu pendant le chargement des données.
Quand utiliser le squeletteLien vers la section
Utilisez Skeleton lorsque la mise en page est connue et que du contenu réel est attendu prochainement.
Mise en page connue
Courte attente
Surfaces de données
État de chargement de la carteLien vers la section
Le squelette se compose naturellement avec des surfaces telles que la carte.
État de chargement de la tableLien vers la section
Utilisez Squelette à l'intérieur des lignes de la table lorsque la forme de la table est connue.
Squelette circulaireLien vers la section
Utilisation circle pour l'avatar, l'icône ou les espaces réservés aux médias ronds.
UtilisationsLien vers la section
Correspond à la forme finale du contenu
Le squelette doit se rapprocher du contenu qu’il remplace : lignes de texte, avatars, cartes ou lignes.
Préserver la hauteur de disposition
Gardez l'état de chargement proche de la hauteur finale pour réduire le décalage de disposition.
Gardez les choses simples
Préférez quelques formes claires à une fausse version détaillée de l'interface utilisateur finale.
Remplacez rapidement lorsque les données sont prêtes
Le squelette est temporaire. Il devrait disparaître dès que le contenu réel peut être rendu.
Utiliser un autre état à la fin du chargement
Les états vides, d'erreur et de succès ont besoin de leur propre interface utilisateur. Le squelette ne représente que le chargement.
Skeleton vs Spinner vs EmptyState vs AlerteLien vers la section
| Situation | Utilisation |
|---|---|
| La disposition est connue et le contenu est en cours de chargement | Squelette |
| Courte tâche de fond inconnue | Spinner ou chargement en ligne |
| Demande réussie mais aucune donnée n'existe | EmptyState |
| La demande a échoué | Alerte |
| Opération de longue durée nécessitant des explications | Statut dédié UI |
| Blocage du chargement au niveau de l'application | UI de chargement au niveau de l'route |
Règle de décision
Utilisez Skeleton pour le contenu attendu. Utilisez EmptyState pour une absence valide. Utilisez Alert en cas d'échec.
APILien vers la section
Props
| Prop | Type | Par défaut | Désignation |
|---|---|---|---|
circle | boolean | false | Rend un squelette circulaire |
className | string | — | Autres classes Tailwind |
Skeleton accepte également le code HTML standard div props.
React.HTMLAttributes<HTMLDivElement>;TypeScript typesLien vers la section
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
circle?: boolean;
}AccessibilitéLien vers la section
Le squelette n'est que visuel.
Directives :
- Squelette rend toujours avec
aria-hidden="true"- il s'agit d'une garantie fixe du composant et ne peut pas être remplacée par un accessoire transmis - Le squelette ne devrait jamais recevoir de concentration
- Le squelette ne doit pas être utilisé comme message d'état
- N'annoncez pas tous les espaces réservés aux lecteurs d'écran
- Fournir une sémantique de chargement accessible à un niveau supérieur lorsque nécessaire
- L'animation pulse respecte
prefers-reduced-motionet est désactivé automatiquement pour les utilisateurs qui en font la demande - Remplacez les squelettes par du contenu réel dès que possible
Règle d'accessibilité
Les squelettes décrivent la forme visuelle pour les utilisateurs voyants. Ils ne sont pas le contenu et ne doivent pas être annoncés comme contenu.
Préférez/évitezLien vers la section
Préférez
- correspondant à la forme finale du contenu
- géométrie simple de placeholder
- Hauteur de disposition stable
- squelettes de table pour les lignes de table
- Séparer les états vide et erreur
Éviter
- Utiliser le squelette pour les erreurs
- Skeleton pour les états vides
- Fausses mises en page trop détaillées
- squelettes de longue durée sans explication
- décalage entre les états de chargement et de chargement
Directives de copie du produitLien vers la section
Skeleton n'a généralement pas besoin de copie.
Forme de chargement silencieux
Laissez l'espace réservé communiquer que le contenu arrive lorsque l'attente est courte.