Skeleton
Squelette de chargement
Des formes décoratives de substitution qui réservent la mise en page approximative du contenu pendant son chargement.
Avec vos mots
Ce que les gens décrivent
Alias documentés : écran squelette, substitut de contenu, placeholder de chargement
- des formes grises où les cartes vont apparaître
- prévisualiser la mise en page pendant le chargement
- des lignes de substitution avant le texte
- réserver l'espace image et titre pendant l'attente
- un chargement qui reprend la forme du contenu final
- éviter que la page saute quand les données arrivent
Essayer
Attendre et suivre une progression
Comparer les trois comportements
Scénario comparatif partagé : Un espace de travail attend la fin d'un contenu ou d'une opération et ne communique que la progression qu'il peut mesurer honnêtement.
Ce contexte reste fixe. Changez de concept pour observer la mission, le cas limite et le spécimen propres à chaque comportement.
Squelette de chargement
Skeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.
Votre mission
Comparer les trois géométries réservées avec les profils chargés, simuler l’échec d’une carte et la réessayer.
Cas limite à vérifier
Une carte en échec devient une vraie erreur textuelle avec Réessayer au lieu de rester un squelette infini.
Mission
Aperçu de chargement - Skeleton
Comparer les trois géométries réservées avec les profils chargés, simuler l’échec d’une carte et la réessayer.
Parties du spécimen
Sélectionnez un repère directement sur le spécimen, ou utilisez la liste ci-dessous, pour afficher son rôle. Masquez les repères pour manipuler librement le labo.
Surface
Le conteneur visible qui accueille le contenu du composant.
À utiliser quand
- Charger une fiche ou un article dont la forme est connue
- Éviter un saut de mise en page pendant le chargement d'une collection
À éviter quand
- L'attente concerne une action compacte de bouton
- La mise en page finale est inconnue ou très variable
Comparer les concepts proches
Spinner communique une attente indéterminée ; Progress bar montre un avancement mesurable, tandis que Skeleton préfigure le contenu en chargement.
Indicateur d'attenteProgress bar exige une valeur mesurable pertinente ; Spinner sert à un avancement inconnu, tandis que Skeleton représente la mise en page finale.
Barre de progressionBuild pack
Transformer ce concept en prompt utile
Choisissez la tâche et la destination. Les noms techniques restent en anglais.
Détails techniques
Comportements
Réserver la mise en page finale
Les formes de substitution réservent un espace stable et sont remplacées sans saut de mise en page.
Marquer la région occupée
La région de contenu expose son état occupé tandis que l'indicateur visuel reste redondant.
États
Espaces réservés visibles
Espaces réservés visibles
Contenu visible
Contenu visible
Erreur de carte visible
Erreur de carte visible
Transitions d’état
Espaces réservés visibles → Contenu visible
Le contenu demandé est disponible et remplace atomiquement la géométrie correspondante des espaces réservés.
Contenu visible → Erreur de carte visible
Simuler l’échec d’une carte garde deux profils visibles et remplace le troisième par une erreur textuelle et Réessayer.
Espaces réservés visibles → Erreur de carte visible
Simuler l’échec d’une carte remplace le chargement par deux profils et une erreur de carte récupérable.
Erreur de carte visible → Espaces réservés visibles
Réessayer la carte restaure les trois espaces réservés correspondants pendant le nouveau chargement.
Erreur de carte visible → Contenu visible
Afficher le contenu remplace l’erreur récupérable par les trois profils chargés.
Scénarios de test
- Contexte
- Un répertoire de personnes charge trois cartes de profil avec avatar, nom et statut court.
- Mission
- Comparer les trois géométries réservées avec les profils chargés, simuler l’échec d’une carte et la réessayer.
- État principal
- Trois espaces réservés décoratifs conservent exactement la grille des profils pendant que le répertoire expose son état occupé.
- Cas limite
- Une carte en échec devient une vraie erreur textuelle avec Réessayer au lieu de rester un squelette infini.
Accessibilité
- Role
- aria-hidden placeholders with aria-busy on the content region
- Nom accessible
- Le contrôle principal ou la région nommée possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
- Focus
- Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole.
- Fermeture
- Les squelettes disparaissent seulement au profit du contenu, d'un état vide ou d'une erreur avec action.
- Scroll
- Le chargement et le contenu de remplacement réservent assez d'espace pour éviter les sauts de mise en page et conserver la position de défilement.
- Annonce
- La région annonce un chargement concis et le résultat final ; les formes décoratives ne sont jamais annoncées.
- Clavier
- Les substituts n'entrent jamais dans l'ordre de tabulation
- Les contrôles Réessayer apparaissent seulement dans les erreurs réelles
Bindings
decorative blocks
- implementationKind
- custom
- nativeElement
- decorative blocks
- ariaPattern
- aria-busy on the content region
- radixPrimitive
- Non applicable
- shadcnRecipe
- Non applicable
- runtimeDependency
- Non applicable
- packageName
- Non applicable
- exportName
- Non applicable
- exactVersion
- Non applicable
- status
- exception
- verifiedAt
- 2026-07-16
- deprecationStatus
- active
- replacement
- Non applicable
- validFrom
- Non applicable
- validUntil
- Non applicable
Limite d’équivalence : Skeleton shapes remain aria-hidden and approximate the final layout; they do not replace a textual loading status where one is needed.
Vérifier la source du binding
Sources
- WAI-ARIA 1.2: aria-busy
W3C WAI · standard · 2026-07-16
Affirmation couverte : Skeleton: normative aria-busy state used to expose an updating region without announcing incomplete content.
- WCAG 2.2: Status Messages
W3C WAI · standard · 2026-07-16
Affirmation couverte : Skeleton: WCAG status-message requirements used to qualify non-focus-moving announcements.
Vérifié le 2026-07-16 · rev. 1
- Responsable
- SkillCodex Editorial
- Statut
- review
- Relecture
- Independent editorial review pending
- Prochaine revue
- 2026-10-16
- Publication
- Non publiée
- Historique
- Brouillon initial sourcé du MVP, en attente de relecture indépendante.