Skeleton Skelett
Introduction
Die Skeleton-Komponente ist ein performantes Platzhalterelement, das anzeigt, dass Inhalte gerade geladen werden. Durch geometrische Layout-Platzhalter verhindert sie beim Laden von Remote-Daten unerwartete Layout-Sprünge (CLS).
Die Komponente unterstützt verschiedene geometrische Formen (Textspalten, Quadrate, Kreis-Avatare) sowie responsive Animationsschleifen (wie Glühen oder Pulsieren) direkt über visuelle Konfiguration.
Usage
So konstruierst du Mockup-Zustände für Karten, Profile und Listen:
1. Mehrzeiliger Textblock-Platzhalter
Simuliert einen Absatz oder ein Beschreibungsfeld während des Wartens auf Artikeltext. Rendert automatisch gestapelte Spalten mit dezenter Puls-Animation.
{
"type": "skeleton",
"shape": "text",
"noOfLines": 3,
"variant": "pulse"
}
2. Kreisförmiger Avatar-Platzhalter
Rendert eine kreisförmige Form für Profilbilder oder Avatar-Icons. Kombinierbar mit Text-Skeletten für Nutzer-Header.
{
"type": "skeleton",
"shape": "circle",
"variant": "pulse"
}
3. Hochglanz-Box-Container (Karten-Mockup)
Ein rechteckiger Box-Container mit diagonaler Glanz-Reflexionsanimation, ideal für Medienkarten oder Banner-Mockups.
{
"type": "skeleton",
"shape": "box",
"variant": "shine"
}
4. Geladener Zustand (Inhaltsumschaltung)
Sobald Client-Daten geladen sind, zeigt loaded: true sofort die verschachtelten Kind-Blöcke (wie eine Überschrift oder echte Karte) und stoppt den Platzhalter-Hintergrund.
{
"type": "skeleton",
"loaded": true,
"children": [
{
"blockType": "heading",
"text": "Account Connected",
"size": "sm"
},
{
"blockType": "text",
"content": "API key sync complete."
}
]
}
Account Connected
API key sync complete.
Props
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Form (shape) | select | "box" | Geometrisches Format der Ressource. • Optionen: "box" (Karten/Bilder), "circle" (Avatare), "text" (Absatzspalten). |
Animationsvariante (variant) | select | "pulse" | Animationsstil. • Optionen: "pulse" (Glühen), "shine" (diagonales Glänzen), "none" (statisch). |
Zeilenzahl (noOfLines) | number | 3 | Anzahl der Spalten bei shape: "text". |
Geladen (loaded) | boolean | false | Bei true wird die Maske übersprungen und Kinder direkt angezeigt. |
Kind-Blöcke (children) | list | - | Verschachtelte Page-Builder-Blöcke, verborgen bis loaded: true. |
Architecture Notes
- Keine Layout-Sprünge: Geometrische Maße (CSS-Grid-Höhe/-Breite) werden server-seitig vor der Hydration geparst. Das bewahrt proportionale Grenzen und vermeidet kumulative Layout-Verschiebung (CLS).
- GPU-beschleunigtes Glänzen: Reflexionen und Pulse nutzen performante CSS-Transforms. Garantiert 60fps selbst auf schwächeren Mobilgeräten.
- Dynamische Inhaltsabbildung: Skeleton-Umschläge erlauben asynchrones Laden von Client-Datenströmen mit nahtlosem Übergang vom Platzhalter zum sichtbaren Zustand.