Composants
Skeleton
Le Skeleton est un affichage simplifié qui indique que le contenu est en cours de chargement. Il réduit l'attention portée au processus de chargement et améliore le temps de chargement perçu par l'utilisateur.
# Usage
Usage
Quand l’utiliser
- Utilisez le Skeleton lors du chargement de contenu lorsque le spinner de chargement n'est pas suffisamment visible.
- À utiliser lorsqu'il y a plusieurs éléments de contenu en cours de chargement simultanément nécessitant un indicateur.
- Proposez un aperçu simplifié du contenu en cours de chargement pour aider à gérer les attentes des utilisateurs tout en réduisant le temps de chargement perçu.
- Les avatars, cartes, graphiques, blocs de contenu, listes et tableaux sont de bons candidats pour un Skeleton.
Quand ne pas l’utiliser
- Le contenu qui se charge instantanément n'a pas besoin de Skeleton.
- Pour une inline action (Hover, Tooltip, Dropdown...) ou un feedback , comme une alerte, envisagez plutôt un spinner.
- Le contenu dynamique révélé lors d'une interaction utilisateur ne doit pas être remplacé par un Skeleton, car le contenu devrait déjà être chargé avant que l'utilisateur puisse interagir avec. Par exemple, le contenu d'un message toast, d'un menu déroulant ou d'une fenêtre modale.
- Pour les processus en arrière-plan, un état de chargement lié à un composant spécifique ou à un contenu existant, utilisez plutôt un spinner.
- Un Skeleton ne doit pas être utilisé en combinaison avec un spinner, choisissez celui qui convient le mieux au cas d'utilisation.
# Do & Don't
**Formes**
Composé d'une ou plusieurs formes basiques qui pulsent horizontalement pour indiquer qu'elles sont en cours de chargement. Utilisez des coins arrondis, même pour les formes rectangulaires.
**Couleur**
Par défaut on utilise Information-fade mais il est possible d’utiliser Stroke-fade sur une forme du Skeleton pour pré-guider l’utilsateur dans son parcours.
**Composition**
Chaque forme doit représenter le contenu de manière reconnaissable. Par exemple, un long rectangle pour une ligne de texte ou un cercle pour un avatar.