Skeleton

Das Skeleton zeigt eine vereinfachte Vorschau, bis der Content geladen ist.

import { Skeleton } from "@mittwald/flow-react-components";

<Skeleton />

Best Practices

Spiegele das finale Layout so gut wie möglich wider. Nutze vereinfachte Formen für Avatare‍ oder Images‍, damit User die erwarteten Inhalte erkennen.
Halte Detailgrad und Anzahl gering. Skeletons sollten an Wireframes erinnern und keine visuelle Unruhe erzeugen.
Setze Skeletons nur für das initiale, kurzzeitige Laden ein. Für andere Lade- oder Feedbackprozesse eignet sich etwa der LoadingSpinner‍.
Vermeide beim Laden einen Cumulative Layout Shift. Das finale Layout sollte den Skeleton-Content nahtlos ersetzen.
Signalisiere den Ladezustand über aria-busy am umgebenden Container. Das Skeleton selbst nutzt bereits aria-hidden; setze aria-busy nach dem Laden auf false (siehe MDN‍).

Skeleton und SkeletonText‍ haben dasselbe Erscheinungsbild, unterscheiden sich aber in ihrer Größe.

Skeletons können mit dem width- oder height-Attribut angepasst werden, um die grobe Ladevorschau an die Benutzeroberfläche anzupassen.

Property	Type	Default	Description
`height`	`Height<string \| number>`	-	The height of the skeleton.
`width`	`Width<string \| number>`	-	The width of the skeleton.

Property	Type	Default	Description
`aria-describedby`	`string`	-	Identifies the element (or elements) that describes the object. @see aria-labelledby
`aria-hidden`	`Booleanish`	-	Indicates whether the element is exposed to an accessibility API. @see aria-disabled.
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby.
`aria-labelledby`	`string`	-	Identifies the element (or elements) that labels the current element. @see aria-describedby.