---
name: loading-state-hierarchy
description: "Loading-States nach Dauer waehlen — Skeleton > 1s mit bekanntem Layout, Spinner < 1s, Progress bei bekannter Dauer"
metadata: 
  node_type: memory
  type: feedback
  originSessionId: 7f5ec970-b013-4424-9fec-1a7e770c3103
---

Jedes Loading: Skeleton fuer > 1s mit bekanntem Layout, Spinner fuer < 1s oder unklare Dauer, Progress-Bar bei bekannter Dauer. Skeleton-State a11y-konform (`aria-busy="true"` + `aria-label="Loading..."`).

**Why:** KAR-522-Audit Konvergenz aus Sources 3 (Web Vitals CLS), 9 (Next.js loading.tsx), 14 (bulletproof-react), 17 (Nicelydone Skeleton). Loading-Wahl beeinflusst direkt CLS-Score (Web Vital), Perceived-Performance, und UX-Konsistenz.

**How to apply:** Pro Async-Operation:
- Erwarteter Loading-Time messen oder schaetzen
- < 1s → Spinner (`<Loader2 className="animate-spin" />`)
- 1-5s mit bekannter Struktur → Skeleton (`<Skeleton>` mit width/height fix gegen CLS)
- Bekannte Dauer (Upload, Multi-Step) → Progress-Bar mit `%`
- Default-Animation: `animate-pulse`, kein Shimmer (BMW-CI passend)
- a11y: Wrapper mit `aria-busy="true"`

Brain-Ref: [[02-Wissen/architecture-audit/03-web-vitals]] · [[02-Wissen/architecture-audit/17-nicelydone-skeleton]] · [[02-Wissen/architecture-audit/00-synthese]] · Standing Order 22.05.2026 (KAR-522).