État de chargement et d'attente

1) Pourquoi gérer l'attente

• (1) que l'action a commencé, (2) combien cela prendra et (3) que faire si quelque chose a mal tourné.
• Un bon état de chargement réduit l'anxiété, maintient le focus et économise du temps.

2) Sélection du modèle : skeleton, progress, spinner, streaming

Skeleton - quand la structure du contenu futur est connue, mais pas de données. Empêche CLS.
Barre de progression (déterministe) - lorsque le volume ou les étapes sont connus (p. ex. apload, KYC).
Indeterminate progress - lorsque la durée est inconnue, mais que le processus est réel (initialisation).
Spinner - seulement comme un indicateur court jusqu'à 600-800 ms ; ensuite - skeleton/progress/texte.
Streaming/partial render - nous donnons les données par parties (SSR/segments) et montrons les zones prêtes à l'emploi immédiatement.

Règle : ne laissez pas l'utilisateur dans « l'espace vide ». Si plus de 1 s - donner la structure et le sens.

3) Seuils et budgets temporaires (repères)

≤ 100 ms est une réponse visuelle instantanée : 'busy' sur le bouton/champ.
≤ 1000 ms - skeleton/indicateur + texte « Nous chargeons »....

4) Micro-modèles de réponse instantanée

Nous traduisons le contrôle en 'busy' à la fois (animation ≤ 100 ms), nous bloquons les clics répétés.
Nous changeons le texte du bouton en « Envoyer »..., nous affichons le toast « Demande acceptée » (facultatif).
Lors du retour du focus sur le champ - skeleton local dans la zone de résultat.

5) Skeleton sans « sauts »

Dessinez la forme 1:1 du contenu futur : hauteur des blocs, proportions des médias (« aspect-ratio »).
Animation shimmer : 1200-1600 ms, amplitude de luminosité ≤ 20 %, pas de stroboscope.
Sur les grandes listes - virtualisation + limitation du nombre de squelettes dans les DOM.

css
.skeleton{position:relative; background:var(--bg-elevated); border-radius:12px; overflow:hidden}
.skeleton::after{
content:"";position:absolute; inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
animation:shimmer 1. 4s infinite;
}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

6) Progrès et étapes