Squelette de chargement

هيكل التحميلSkeleton

Stablesrc/dsm/components/skeleton.tsx

Le squelette occupe la forme du contenu à venir pendant son chargement, pour réduire la sensation d'attente et éviter les sauts de mise en page.

Import

import { Skeleton } from "@/dsm/components/skeleton";

Plusieurs lignes, la dernière plus courte.

LTR

text, rect et circle.

LTR

Squelette reproduisant une carte de service en cours de chargement.

LTR

Utilisez-le quand le contenu met plus de quelques centaines de millisecondes à arriver (liste de démarches, statut d'un dossier).
Reproduisez la forme réelle du contenu final (largeur, hauteur, nombre de lignes) pour une transition sans saut visuel.

N'en abusez pas pour un contenu qui s'affiche quasi instantanément : préférez ne rien montrer plutôt qu'un flash de squelette.
Ne l'utilisez pas comme état d'erreur : une fois le chargement en échec, affichez un `EmptyState` ou une `Alert`.

`SkeletonGroup` porte `role="status"` et annonce le libellé « Chargement » aux lecteurs d'écran.
Chaque `Skeleton` est `aria-hidden` : seul le conteneur du groupe est annoncé, pas chaque forme individuellement.

Le dégradé animé (`dsm-shimmer`) balaie horizontalement sans notion de sens de lecture : aucune adaptation n'est nécessaire.
La dernière ligne d'un bloc `text` est raccourcie par une largeur relative, cohérente dans les deux sens de lecture.

Skeleton

Propriété	Type	Défaut	Description
variant	"text" \| "rect" \| "circle"	rect	Forme du squelette.
lines	number	—	Nombre de lignes pour `variant="text"` ; la dernière est plus courte.
className	string	—	Dimensions et rayon via des classes Tailwind (`h-4 w-32`, `size-10`…).

SkeletonGroup

Propriété	Type	Défaut	Description
children	ReactNode	—	Un ou plusieurs `Skeleton`, annoncés comme un seul état de chargement.