Stati di avvio e attesa

1) Perché gestire l'attesa

• (1) che l'azione è iniziata, (2) quanto ci vuole e (3) cosa fare se qualcosa è andato storto.
• Il buon stato di caricamento riduce l'ansia, mantiene il focus e risparmia tempo.

2) Selezione del pattern: skeleton, progress, spinner, streaming

Skeleton - Quando si conosce la struttura dei contenuti futuri, ma non ci sono dati. Impedisce la CLS.
Progress bar - Quando si conosce un volume o una fase (ad esempio, appload, KYC).
Indeterminate progress - Quando la durata è sconosciuta, ma il processo è reale (inizializzazione).
Spinner - solo come indicatore breve fino a 600-800 ms; successivo: skeleton/progresso/testo.
Streaming/partial render - Forniamo i dati alle parti (SSR/segmenti) e visualizziamo le zone pronte immediatamente.

Regola: non lasciare l'utente vuoto. Se hai più di 1 c, dammi la struttura e il senso.

3) Soglie di tempo e budget (indicazioni)

100 ms - Risposta visiva immediata: 'busy', pulsante/campo.
≤ 1000 ms - skeleton/indicatore + testo «Scarichiamo»....

4) Micro-pattern di risposta immediata

Mettiamo il controllò busy "subito (animazione da 100 ms), blocchiamo i clic ripetuti.
Cambia il testo del pulsante in Invia..., mostra il toast Richiesta accettata (opzionale).
Quando si ripristina un focus sul campo, lo skeleton locale è nella zona di risultato.

5) Skeleton senza «salto»

Disegnare la forma 1:1 dei contenuti futuri: altezza dei blocchi, proporzioni dei media ('aspect-ratio').
L'animazione shimmer è 1200-1600 mc, l'ampiezza di luminosità è del 20%, senza righe.
I grandi elenchi includono la virtualizzazione e la limitazione del numero di scheletri in DON.

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) Progressi e fasi