Le composant squelette de chargement peut être utilisé pour afficher le chargement d'une page tout en donnant à l'utilisateur un indice de ce qu'il va pouvoir avoir sur la page.
Les avatars, les cartes, les graphiques, les blocs de contenu, les listes et les tableaux sont de bons candidats pour avoir un état squelette.
Tous les squelettes de chargement doivent être remplacés par le vrai contenu une fois l'élément chargé dans la page.
✅ Usage correct :
- Lorsque plusieurs éléments de contenu se chargent en même temps et nécessitent un indicateur.
- Lors du chargement du contenu et qu'une roue de chargement n'est pas assez visible.
🚫 Usage incorrect :
- Ne pas utiliser de squelettes de chargement qui ne correspondent pas aux éléments qui seront ensuite affichés sur la page.
Comportement général
Le comportement général d'un squelette de chargement est le suivant :
Affichage immédiat
Lorsqu'une partie de l'interface utilisateur est en cours de chargement, le squelette de chargement est affiché immédiatement à la place du contenu réel. Cela empêche l'utilisateur de voir une page vide ou une interface statique, ce qui peut donner l'impression que l'application ne fonctionne pas.
Disparition après le chargement
Une fois que le contenu réel est chargé et prêt à être affiché, le squelette de chargement disparaît, laissant place au contenu final.
Alternatives