Loading funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/loading) — die Library erkennt die Umgebung automatisch.
Loading
Loading rendert visuelle Ladezustände für asynchrone Prozesse, inklusive Spinner-/Indikatorvarianten und konsistentem Motion-Verhalten.
Übersicht
import { Loading } from "@prokodo/ui/loading"
{
isFetching && <Loading variant="spinner" fullscreen />
}
Import
import { Loading } from "@prokodo/ui/loading"
Styling is handled via design tokens — no additional CSS import required.
Props
LoadingProps ist ein diskriminierter Union-Typ zwischen einem einfachen Spinner (variant="spinner", Standard) und einem Vollbild-Overlay (variant="overlay").
Gemeinsame Props
| Prop | Typ | Standard | Pflicht | Beschreibung |
|---|---|---|---|---|
variant | "spinner" | "overlay" | "spinner" | — | Visueller Style-Typ. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "sm" | — | Größe des Spinners. |
color | "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "white" | — | — | Explizite Spinner-Farbe; verwendet currentColor wenn nicht gesetzt. |
ariaLabel | string | "Loading" | — | Zugängliches Label für Screenreader. |
reducedMotion | boolean | — | — | Animation deaktivieren (unabhängig von Systemeinstellungen). |
className | string | — | — | CSS-Klasse am Root-Element. |
style | CSSProperties | — | — | Inline-Styles am Root-Element. |
Zusätzliche Overlay-Props (variant="overlay")
| Prop | Typ | Standard | Beschreibung |
|---|---|---|---|
show | boolean | true | Overlay anzeigen. |
backdrop | "light" | "dark" | "auto" | "auto" | Hintergrundfarbe (auto erkennt das System-Theme). |
blur | number | 0 | Backdrop-Blur-Intensität in px. |
zIndex | number | 9999 | z-index des Overlay-Containers. |
Siehe
src/components/loading/Loading.model.tsfür den vollständigenLoadingProps-Typ.
Design-Tokens
Loading verfügt über keine CSS-Custom-Property-Tokens. Die Spinner-Farbe wird ausschließlich über die CSS-Eigenschaft color gesteuert.
| Mechanismus | Beschreibung |
|---|---|
color (Prop) | Mapped auf einen Design-System-Token (z. B. var(--pk-color-brand) für "primary"). |
currentColor | Ohne color-Prop erbt der Spinner die CSS-Textfarbe des Elternelements. |
AIC-Hinweis
Verwende im Anwendungscode immer den Standard-Importpfad:
import { Loading } from "@prokodo/ui/loading"
Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.
AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente.
Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).
WCAG-2.2-Status
| Kriterium | Bezeichnung | Status | Hinweis |
|---|---|---|---|
| 1.3.1 | Info und Beziehungen (A) | ✅ Erfüllt | Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden. |
| 4.1.2 | Name, Rolle, Wert (A) | ✅ Erfüllt | Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein. |
| 4.1.3 | Statusmeldungen (AA) | ✅ Erfüllt | Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status'). |
Testabdeckung: 2 jest-axe-Assertion(s) in 4 Testdatei(en) · 1 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.