Comparaison comportementale
Squelette de chargement vs Indicateur d'attente
Choisir Squelette de chargement pour : Charger une fiche ou un article dont la forme est connue. Choisir Indicateur d'attente pour : Une courte opération n'a pas de valeur d'avancement utile.
| Dimension | Squelette de chargementSkeleton | Indicateur d'attenteSpinner |
|---|---|---|
| Déclenchement | Le chargement initial commence alors que la mise en page attendue est déjà connue. | Une opération dont la durée restante est inconnue commence. |
| Modalité | Espace réservé non modal ; les régions non concernées restent utilisables. | Indicateur d’état non modal, sauf si le parcours environnant bloque lui-même l’interaction. |
| Positionnement | Occupe la même mise en page responsive et les mêmes dimensions que le contenu à venir. | Près de la région ou du contrôle concerné, sans remplacer le contenu sans rapport. |
| Interactivité | Non interactif et non focalisable ; les vrais contrôles ne le remplacent qu’une fois prêts. | Non interactif ; un état accessible indique que le traitement est toujours en cours. |
| Focus | Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole. | Le focus reste sur le contrôle initiateur sauf si une transition documentée remplace toute la vue. |
| Fermeture | Les squelettes disparaissent seulement au profit du contenu, d'un état vide ou d'une erreur avec action. | L'indicateur s'arrête lorsque le travail se termine ou est annulé ; il n'est jamais un message à fermer manuellement. |
| Rôle accessible | aria-hidden placeholders with aria-busy on the content region | status text with aria-busy on the updated region |
| Cas d’usage | Charger une fiche ou un article dont la forme est connue | Une courte opération n'a pas de valeur d'avancement utile |
| Comportement mobile | Reproduire la géométrie mobile du contenu pour éviter un saut lors du remplacement. | Réserver un espace stable et accompagner l’indicateur d’un bref état textuel lorsque l’attente est perceptible. |