Pobierz i czekaj stany

1) Dlaczego zarządzać czekaniem

• (1) co rozpoczęło się działanie, (2) ile zajęłoby i (3) co zrobić, gdyby coś poszło nie tak.
• Dobry stan rozruchu zmniejsza lęk, zachowuje koncentrację i oszczędza czas.

2) Wybór wzoru: szkielet, postęp, spinner, streaming

Szkielet - kiedy znana jest struktura przyszłych treści, ale nie ma danych. Zapobiega CLS.
Pasek postępu (deterministyczny) - gdy wolumin lub etapy są znane (na przykład apload, KYC).
Nieokreślony postęp - kiedy czas trwania jest nieznany, ale proces jest rzeczywisty (inicjalizacja).
Spinner - tylko jako krótki wskaźnik do 600-800 ms; dalej - szkielet/postęp/tekst.
Streaming/częściowy render - podajemy dane w częściach (SSR/segmenty) i od razu pokazujemy gotowe strefy.

Zasada: Nie zostawiaj użytkownika w pustej przestrzeni. Jeśli więcej niż 1 s - dać strukturę i znaczenie.

3) Progi czasowe i budżety (poziomy odniesienia)

≤ 100 ms - natychmiastowa odpowiedź wizualna: „zajęta” na przycisku/polu.
≤ 1000 ms - szkielet/wskaźnik + tekst „Załaduj”....

4) Mikroszablony natychmiastowej reakcji

Natychmiast przenosimy sterowanie do 'zajętego' (animacja ≤ 100 ms), blokujemy powtarzane kliknięcia.
Zmień tekst przycisku na „Wyślij”..., pokaż toast „Żądanie akceptowane” (opcjonalnie).
Po powrocie ostrości do pola, szkielet lokalny znajduje się w strefie wyników.

5) Szkielet bez „skoków”

Narysuj formę przyszłej zawartości: wysokość bloku, proporcje medialne („aspect-ratio”).
Szimmer animacji: 1200-1600 ms, amplituda jasności ≤ 20%, bez strobi.
Na dużych listach - wirtualizacja + ograniczenie liczby szkieletów w 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) Postępy i kamienie milowe