Skeleton
Un skeleton loader indique que les données sont en cours de chargement et que l'écran n'est pas figé.
Description
Un skeleton loader indique que les données sont en cours de chargement et que l'écran n'est pas figé.
Le skeleton loader ressemble à une version simplifiée de la page et de ses composants. Il ne doit apparaître que pendant quelques secondes et disparaître une fois que les composants et le contenu ont été chargés dans la page.
Plateformes
Anatomie
- Container : Cartes, blocs, section,…
- Contenu : Textes, images, prix, boutons,…
Usage
Quand l'utiliser ?
On utilise le skeleton loader quand il est nécessaire de charger une section de la page et que ce chargement peut prendre plusieurs secondes.
Ainsi l'utilisateur ne reste pas en face d'un écran vide et comprends que le contenu est en cours de chargement. De plus le skeleton permet à l'utilisateur de se faire une image mentale de la disposition des éléments sur la page, ce qui lui permettra de scanner plus rapidement les informations une fois celle-ci chargée.
Exemple
Anatomie
- Container : Cartes, blocs, section,…
- Contenu : Textes, images, prix, boutons,…
Usage
Quand l'utiliser ?
On utilise le skeleton loader quand il est nécessaire de charger une section de la page et que ce chargement peut prendre plusieurs secondes.
Ainsi l'utilisateur ne reste pas en face d'un écran vide et comprends que le contenu est en cours de chargement. De plus le skeleton permet à l'utilisateur de se faire une image mentale de la disposition des éléments sur la page, ce qui lui permettra de scanner plus rapidement les informations une fois celle-ci chargée.
Exemple
Des questions ou un feedback ?
N’hésitez pas à contacter la team Design System par mail.