Aller au contenu
SkillCodex
Menu

Skeleton

Squelette de chargement

Des formes décoratives de substitution qui réservent la mise en page approximative du contenu pendant son chargement.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r2
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : des formes grises où les cartes vont apparaîtreprévisualiser la mise en page pendant le chargementdes lignes de substitution avant le texte

Toutes les formulations
Enregistrer et partager

Reconnaître

Attendre et suivre une progression

Essayer

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

Squelette de chargement

Contexte commun aux essais

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.

Squelette de chargement

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.

Résultat de l’essai

Trois cartes décoratives chargent ; la région réelle est marquée occupée.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
Trois espaces réservés décoratifs reprennent approximativement 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.

Ce que cet essai montre

Skeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.

Lequel convient à ton besoin ?

Squelette de chargement

Charger une fiche ou un article dont la forme est connue

Indicateur d'attente

Une courte opération n'a pas de valeur d'avancement utile

Quel composant utilises-tu ici ?
Différence et sources

Skeleton préfigure la forme du contenu ; Spinner communique une attente inconnue de façon compacte, tandis que Progress bar rapporte un avancement mesurable.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Surface

    Le conteneur visible qui accueille le contenu du composant.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Attendre et suivre une progression

      Squelette de chargement appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Indicateur d'attente

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

      Comparer cette paire
    • Ne pas confondre

      Barre de progression

      Choisis Squelette de chargement si une zone de page charge un contenu dont la mise en page est connue à l’avance. Choisis Barre de progression si une tâche a une valeur d’avancement fiable, comme un envoi en octets.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    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

    Choisir

    À 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

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Lance le chargement de l’exemple et utilise Tab pendant que les espaces réservés sont visibles.

      Résultat attendu

      La zone de chargement est identifiée, mais les formes décoratives ne deviennent pas des arrêts au clavier.

    2. 2. À faire

      Laisse apparaître le vrai contenu et compare sa disposition à l’espace réservé.

      Résultat attendu

      Le contenu remplace les formes sans déplacement inutile de la mise en page ni changement de focus.

    3. 3. À faire

      Simule l’échec d’une carte dans l’exemple d’essai, choisis Réessayer, puis Afficher le contenu.

      Résultat attendu

      La carte en échec remplace sa forme de chargement par une explication et Réessayer ; un nouvel essai réussi rétablit le vrai contenu.

    Contrat complet
    1. 1La géométrie reprend approximativement le contenu final
    2. 2Les formes sont masquées aux technologies d'assistance
    3. 3La région parente expose l'état occupé
    4. 4Les états vide et erreur remplacent une attente indéfinie

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Squelette de chargement sans casser son comportement

    # Implémenter Squelette de chargement dans ton agent
    
    ## Objectif
    Implémente Squelette de chargement pour ce comportement vérifié : Des formes décoratives de substitution qui réservent la mise en page approximative du contenu pendant son chargement.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Squelette de chargement répond au besoin avant de coder.
    
    ## Comportement requis
    - Les formes de substitution réservent un espace stable et sont remplacées sans saut de mise en page.
    - La région de contenu expose son état occupé tandis que l’indicateur visuel reste redondant.
    
    ## États à couvrir
    - Espaces réservés visibles
    - Contenu visible
    - Erreur de carte visible
    
    ## Accessibilité
    - Rôle ARIA : [aria-hidden=true] + [aria-busy=true]
    - Le contrôle principal ou la région nommée pour Squelette de chargement 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.
    - Le focus reste sur la page existante ; remplacer les substituts ne le réordonne ni ne le vole.
    - Les squelettes disparaissent seulement au profit du contenu, d’un état vide ou d’une erreur avec action.
    - La région annonce un chargement concis et le résultat final ; les formes décoratives ne sont jamais annoncées.
    - Les substituts n’entrent jamais dans l’ordre de tabulation
    - Les contrôles Réessayer apparaissent seulement dans les erreurs réelles
    
    ## Quand ne pas utiliser
    - L’attente concerne une action compacte de bouton
    - La mise en page finale est inconnue ou très variable
    
    ## Critères d’acceptation
    - La géométrie reprend approximativement le contenu final
    - Les formes sont masquées aux technologies d’assistance
    - La région parente expose l’état occupé
    - Les états vide et erreur remplacent une attente indéfinie
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Squelette de chargement sur un parcours réel

    # Vérifier Squelette de chargement après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Squelette de chargement au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:10e0908fbfc7204073e9ceb3e38f604a1cd376d5c4ea6ce37f761bd226ac2843

    Diagnostiquer un problème

    Trouve et corrige le défaut de Squelette de chargement

    # Déboguer Squelette de chargement dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Squelette de chargement.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - La géométrie reprend approximativement le contenu final
    - Les formes sont masquées aux technologies d’assistance
    - La région parente expose l’état occupé
    - Les états vide et erreur remplacent une attente indéfinie
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Squelette de chargement

    # Empêcher la régression de Squelette de chargement
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Squelette de chargement aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:1f549eab6c64e14309ca9b1fe013237e0dbc7be294aeba39a58faa5cc8f6712a

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:4eeabb49e3c250af3c3a17e0c29b2ba53f3421d6e42dd26724fb0d2951c4f09f

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    decorative blocks

    NatifLes formes du skeleton sont des substituts visuels décoratifs. aria-busy appartient à la région mise à jour, avec un texte d’état si nécessaire.

    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 reprennent approximativement 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.

    Signaux visuels

    • Blocs atténués aux proportions du contenu final
    • Aucun faux contenu lisible
    • Dimensions stables avant et après remplacement

    Signaux comportementaux

    • Le substitut est masqué aux technologies d'assistance
    • La région parente est occupée
    • L’état occupé reste sur la région parente jusqu’à la fin du remplacement

    Accessibilité

    Rôle
    [aria-hidden=true] + [aria-busy=true]
    Nom accessible
    Le contrôle principal ou la région nommée pour Squelette de chargement 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 clavier
    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.
    Défilement
    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

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • 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
      sourceId
      source-ui-wai-aria-busy
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Les formes du skeleton sont des substituts visuels décoratifs. aria-busy appartient à la région mise à jour, avec un texte d’état si nécessaire.

      Vérifier la source du binding

    Sources

    • shadcn/ui: Skeleton
      sourceId
      source-ui-shadcn-skeleton
      kind
      documentation
      canonicalUrl
      https://ui.shadcn.com/docs/components/radix/skeleton
      publisher
      shadcn/ui
      sourceRevision
      http-etag:W/"10rf6hvbiwtf4zv"
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:2093318e2a546a69ce8dde969099676cd25b5e74e0a089cb6fc6162f261924f0
      status
      verified

      Affirmation couverte : Squelette de chargement : parties, API d'état, interactions et limites d'implémentation documentées pour shadcn Skeleton.

    • WAI-ARIA 1.2: aria-busy
      sourceId
      source-ui-wai-aria-busy
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#aria-busy
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Squelette de chargement : l'état normatif aria-busy pour exposer une région pendant la mise à jour de son contenu.

    • WCAG 2.2: Status Messages
      sourceId
      source-ui-wcag-understanding-status-messages
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:cf2a8c16b20c1a94164c9a37e2b3f15d9a7d3f47d88385d47432d6a29655609e
      status
      verified

      Affirmation couverte : Squelette de chargement : guide WCAG informatif sur les messages d'état annoncés sans déplacer le focus.

    • WAI-ARIA 1.2: Live Region Attributes
      sourceId
      source-ui-wai-aria-live-regions
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#attrs_liveregions
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Squelette de chargement : propriétés normatives des régions live pour le comportement d'annonce d'état.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Squelette de chargement : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.