Skeleton

Lade-Platzhalter für Inhalte die asynchron geladen werden. Die Shimmer-Animation zeigt, dass der Ladevorgang läuft — ohne leere Flächen oder Spinner-Durcheinander.

Listen-Item-Skeleton

Typisches Muster für Listen mit Avatar, Name und Beschreibung — z.B. Ladesäulen-Liste in der Lade-App.

Ladesäulen-Liste laedt

Avatar + zwei Textzeilen — entspricht dem echten Listen-Item-Layout.

<div class="flex items-start gap-3">
  <Skeleton variant="avatar" />
  <div class="flex-1">
    <Skeleton variant="title" width="55%" class="mb-2" />
    <Skeleton variant="text" lines={2} />
  </div>
</div>

Karten-Skeleton

Vollständiger Card-Skeleton — wird eingesetzt während Förderantrag-Kacheln oder Mobilitäts-Angebote geladen werden.

Förderanträge werden geladen

Bild, Titel und Beschreibung als Platzhalter.

<Skeleton variant="card" />
<Skeleton variant="card" />
<Skeleton variant="card" />

Tabellenzeilen-Skeleton

Ersetzt Tabelleninhalte während der Förderantrag-Status aus dem Backend geladen wird.

Antragstabelle laedt

Gleichmäßige Zeilen-Platzhalter in Tabellenbreite.

<div class="flex flex-col gap-3 border border-brand-border rounded-xl overflow-hidden p-4">
  <Skeleton variant="title" width="30%" />
  {[1, 2, 3, 4].map(() => (
    <div class="flex gap-4">
      <Skeleton variant="text" width="20%" />
      <Skeleton variant="text" width="35%" />
      <Skeleton variant="text" width="25%" />
      <Skeleton variant="text" width="15%" />
    </div>
  ))}
</div>

Redakteurshinweise

Wann einsetzen

Asynchron geladene Listen, Tabellen, Karten
Erster Seitenaufruf mit Server-Side-Fetch
Nicht bei schnellen Operationen unter 300 ms
Statt Spinner bei inhaltlichen Platzhaltern

Inhalts-Empfehlungen

Skeleton soll die Struktur des Ziel-Inhalts spiegeln
Gleiche Anzahl Zeilen wie späters Ergebnis (oder max. 5)
Keine Mixtur aus Skeleton und echtem Inhalt
animated=false bei langen Ladezeiten um CPU zu sparen

Mobile + A11y

role="status" mit aria-busy="true" signalisiert Screenreadern
sr-only Text "Wird geladen..." ist für Voiceover lesbar
Shimmer-Animation bei prefers-reduced-motion deaktiviert
Skeleton ersetzt nicht die eigentliche Fehler-Behandlung

Haeufige Fehler

Fehler: Skeleton bleibt nach Laden erhalten (DOM ersetzen!)
Fehler: Zu viele Varianten auf einer Seite mischen
Fehler: Exakte Pixelbreiten — besser relative Werte (60%, 80%)
Fehler: Skeleton bei synchonen Operationen anzeigen

Installation

cp-components add skeleton