Comparaison comportementale

Squelette de chargement vs Indicateur d'attente

Différence décisive

Le Squelette de chargement réserve la mise en page future pendant le chargement ; l’Indicateur d’attente est un indicateur compact d’un travail de durée inconnue, sans indice de mise en page.

Squelette de chargementChoisis Squelette de chargement si la zone en chargement est grande et que sa forme finale est prévisible, comme une carte ou un article.
Indicateur d'attenteChoisis Indicateur d’attente si l’attente est courte ou la zone petite, comme à l’intérieur d’un bouton.

Voir les neuf dimensions Voir les sources

Décision

Question de famille

La durée est-elle inconnue, mesurable ou faut-il préserver la forme du contenu ?

Neuf dimensions

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=true] + [aria-busy=true]	status + [aria-busy=true]
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.

Squelette de chargement vs Indicateur d'attente

Différence décisive

Le Squelette de chargement réserve la mise en page future pendant le chargement ; l’Indicateur d’attente est un indicateur compact d’un travail de durée inconnue, sans indice de mise en page.

Squelette de chargementChoisis Squelette de chargement si la zone en chargement est grande et que sa forme finale est prévisible, comme une carte ou un article.
Indicateur d'attenteChoisis Indicateur d’attente si l’attente est courte ou la zone petite, comme à l’intérieur d’un bouton.

Voir les neuf dimensions Voir les sources

Neuf dimensions

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=true] + [aria-busy=true]	status + [aria-busy=true]
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.