# Skeleton

Das Skeleton zeigt als Platzhalter eine vereinfachte Vorschau der Benutzeroberfläche, bis der Content vollständig geladen ist.

## Guidelines

# Grundlagen

Skeletons sind Platzhalter, die während des Ladens bereits die Struktur einer
Seite andeuten. Sie vermitteln Usern eine Vorschau auf das Layout und verbessern
so die wahrgenommene Performance. Gleichzeitig helfen sie, Layout-Sprünge zu
vermeiden, bevor die eigentlichen Inhalte geladen sind.

## Best practices

Achte bei der Verwendung von Skeletons darauf, dass ...

- sie das finale Layout der Benutzeroberfläche so gut wie möglich widerspiegeln,
  sodass User erkennen können, welche Inhalte zu erwarten sind. Verwende dafür
  vereinfachte Formen wie z. B. Platzhalter für Textblöcke,
  [Avatare](/04-components/content/avatar/overview) oder
  [Images](/04-components/content/image/overview).
- Detailgrad und Anzahl der Skeletons nicht zu hoch sind – sie sollten eher an
  Wireframes erinnern und keine visuelle Unruhe erzeugen.
- sie ausschließlich für das initiale und kurzzeitige Laden von Inhalten
  eingesetzt werden. Für andere Lade- oder Feedbackprozesse verwende
  beispielsweise stattdessen den
  [LoadingSpinner](/04-components/status/loading-spinner/overview).
- beim Laden kein Cumulative Layout Shift entsteht – das finale Layout sollte
  nahtlos den Skeleton-Content ersetzen.
- sie für Screenreader ausgeblendet oder entsprechend gekennzeichnet sind (z. B.
  `aria-busy="true"`).

## Verwendung

Verwende Skeletons, um visuell ansprechende Ladezustände für Inhalte wie
[Listes](/04-components/structure/list/overview),
[Images](/04-components/content/image/overview) oder
[Texte](/04-components/content/text/overview) darzustellen – sie bieten
Orientierung, indem sie die spätere Struktur und Position der Inhalte andeuten.