Descărcați și așteptați statele

1) De ce să gestionați așteptarea

• 1) ce a început acţiunea, 2) cât de mult ar fi nevoie şi 3) ce trebuie făcut dacă ceva nu ar merge bine.
• Starea bună de boot reduce anxietatea, menține concentrarea și economisește timp.

2) Selectarea modelului: schelet, progres, spinner, streaming

Scheletul - atunci când structura conținutului viitor este cunoscută, dar nu există date. Previne CLS.
Bara de progres (deterministă) - atunci când volumul sau etapele sunt cunoscute (de exemplu, încărcați, KYC).
Progresul nedeterminat - atunci când durata este necunoscută, dar procesul este real (inițializare).
Spinner - numai ca un indicator scurt de până la 600-800 ms; mai departe - schelet/progres/text.
Streaming/randare parțială - oferim datele în părți (SSR/segmente) și arătăm zonele finite imediat.

Regulă: Nu lăsați utilizatorul într-un spațiu gol. Dacă mai mult de 1 s - da structura și sensul.

3) Praguri de timp și bugete (repere)

≤ 100 ms - răspuns vizual instantaneu: „ocupat” pe buton/câmp.
≤ 1000 ms - schelet/indicator + text „Sarcină”....

4) Micro-modele de răspuns instantaneu

Transferăm controlul la „ocupat” imediat (animație ≤ 100 ms), blocăm clicurile repetate.
Modificați textul butonului în „Trimite”..., afișați toastul „Cerere acceptată” (opțional).
Când focalizarea revine pe câmp, scheletul local se află în zona de rezultat.

5) Schelet fără „salturi”

Desenați o formă 1:1 a conținutului viitor: înălțimi blocate, proporții media („raport aspect”).
Animație strălucitoare: 1200-1600 ms, amplitudine luminozitate ≤ 20%, fără strobe.
Pe liste mari - virtualizare + limitarea numărului de schelete în 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) Progresul și reperele