Einführung

Eine visuelle Lade-Layout-Hilfskomponente, die ein rotierendes Spinner-Element mit begleitendem Statusmeldungstext kombiniert. Wird hauptsächlich verwendet, um Benutzererwartungen während Serverabrufen, Dateioperationen, Zustandsübergängen oder Inhaltsverarbeitungszuständen innerhalb von Layout-Blöcken zu verwalten.

Die Loader-Komponente ist vollständig als loader-Block im Page Builder integriert und ermöglicht es Content-Autoren und Entwicklern, visuellen Status text und Spinner-Ausrichtungen direkt innerhalb der CMS-Seitenschemata zu konfigurieren.

Verwendung

Diese Beispiele veranschaulichen, wie Content-Editoren interaktive Loader binden und strukturieren.

1. Standard-zentrierter Status-Loader

Ein klassischer Ladeindikator mit Standard-Status text, geeignet für Haupt-Panel-Einträge, Inhaltsaktualisierungen oder lazy-geladene Blöcke.

{
  "type": "loader",
  "text": "Loading workspace data...",
  "spinnerPlacement": "start"
}

2. Loader mit nachgestelltem Spinner (End-Ausrichtung)

Zeigt den visuellen Spinner nach der Statusnachricht ausgerichtet und bietet so einen alternativen visuellen Fluss für Kartenfußzeilen oder Inline-Button-Aktionen.

{
  "type": "loader",
  "text": "Please wait while we process your request",
  "spinnerPlacement": "end"
}

Props

Entwicklerhinweise & Barrierefreiheit

• Hydration-Frei (Nur Statisch): Der Loader ist ein rein präsentationelles Layout-Hilfsmittel, das als rein statische Komponente (Tier 3) gekennzeichnet ist. Er kompiliert zu standardmäßigem server-seitigem HTML/CSS-Markup mit absolut null interaktivem clientseitigem JavaScript.
• WAI-ARIA-Konformität: Im Hintergrund ist diese Komponente für assistive Technologien konzipiert und kompiliert mit entsprechenden Live-Region- oder Busy-Container-Parametern (z. B. aria-busy="true", role="status" auf übergeordneten Containern), was eine reibungslose Kommunikation laufender Hintergrundaktivitäten sicherstellt.