Ladezustände und Standby

1) Warum die Erwartung verwalten

• (1) dass die Aktion begonnen hat, (2) wie lange es dauert und (3) was zu tun ist, wenn etwas schief gegangen ist.
• Ein guter Ladezustand reduziert die Angst, hält den Fokus und spart Zeit.

2) Musterauswahl: Skelett, Fortschritt, Spinner, Streaming

Skeleton - wenn die Struktur zukünftiger Inhalte bekannt ist, aber keine Daten vorliegen. Verhindert CLS.
Progress bar (deterministisch) - wenn der Umfang oder die Schritte bekannt sind (z. B. Apload, KYC).
Indeterminate progress - wenn die Dauer unbekannt ist, aber der Prozess real ist (Initialisierung).
Spinner - nur als kurzer Indikator bis zu 600-800 ms; weiter - Skelett/Fortschritt/Text.
Streaming/partieller Render - Wir geben die Daten in Teilen (SSR/Segmente) zurück und zeigen die fertigen Zonen sofort an.

Regel: Lassen Sie den Benutzer nicht im „leeren Raum“. Wenn mehr als 1 s - geben Sie Struktur und Bedeutung.

3) Zeitliche Schwellenwerte und Budgets (Benchmarks)

≤ 100ms - sofortige visuelle Reaktion: „busy“ auf der Taste/Feld.
≤ 1000 ms - Skelett/Indikator + Text „Herunterladen“....

4) Mikromuster der sofortigen Reaktion

Wir übersetzen die Kontrolle sofort in „busy“ (Animation ≤ 100 ms), blockieren wiederholte Klicks.
Wir ändern den Text der Schaltfläche in „Senden“..., zeigen den Toast „Anfrage angenommen“ (optional).
Wenn Sie den Fokus auf das Feld zurückbringen - lokales Skelett in der Ergebniszone.

5) Skeleton ohne „Sprünge“

Zeichnen Sie 1:1 die Form zukünftiger Inhalte: Blockhöhen, Medienproportionen ('aspect-ratio').
Shimmer-Animation: 1200-1600 ms, Helligkeitsamplitude ≤ 20%, kein Strobe.
Auf großen Listen - Virtualisierung + Begrenzung der Anzahl der Skeletons im 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) Fortschritte und Meilensteine