SkeletonMode

export default () => {
  const [isLoading, setIsLoading] = useState(true);

  return (
    <Section>
      <Switch
        isSelected={isLoading}
        onChange={setIsLoading}
      >
        Ladezustand anzeigen
      </Switch>
      <SkeletonMode isEnabled={isLoading}>
        <Section>
          <Heading>Webshop Relaunch</Heading>
          <Text>
            Das Projekt liegt auf dem Server p-4711 und wird
            jede Nacht gesichert.
          </Text>
          <LabeledValue>
            <Label>Speicherplatz</Label>
            <Content>20 GB</Content>
          </LabeledValue>
        </Section>
      </SkeletonMode>
    </Section>
  );
}

Best Practices

• Umschließe die finale Oberfläche mit dem SkeletonMode, statt eine eigene Ladeansicht aus Skeleton‍ und SkeletonText‍ nachzubauen. So entspricht die Vorschau dem finalen Layout, und es entsteht kein Layout-Sprung.
• Gib Platzhalter-Inhalt mit, wenn ein Balken eine bestimmte Breite haben soll. Components mit Inhalt übernehmen dessen Breite, Components ohne Inhalt nutzen eine Standardbreite.
• Gib einem Image ohne feste Größe ein aspectRatio. Das Skeleton lädt das Bild nicht, kennt sein Seitenverhältnis also nicht und nimmt sonst 16:9 an.
• Nimm bereits geladene Bereiche mit isEnabled={false} aus dem Skeleton heraus.
• Setze den SkeletonMode nur für das initiale, kurzzeitige Laden ein. Für andere Lade- oder Feedbackprozesse eignet sich etwa der LoadingSpinner‍.
• Verlass dich auf die eingebaute Ansage. Der SkeletonMode meldet Screenreadern einmal „Inhalt wird geladen“ und nimmt die Platzhalter selbst aus dem Accessibility Tree.
• Schalte den SkeletonMode nicht ein, während der Fokus in seinem Inhalt liegt. Der Fokus geht dabei verloren.

Inhalt und Breite

Components mit Inhalt werden zu einem Balken pro Zeile, in der Breite dieser Zeile. Components ohne Inhalt zeigen einen Balken in einer Standardbreite.

Teilweise geladen

Ein verschachtelter SkeletonMode mit isEnabled={false} stellt seinen Inhalt als echte Oberfläche dar – etwa eine Überschrift, die schon vor den Daten feststeht.

Bilder, Badges und Buttons

Avatare, Icons, Images, Badges und Buttons behalten Form und Größe und werden zu einer Fläche. Ihr Inhalt ist ausgeblendet, ein Text in einem Button oder Badge zeigt keinen eigenen Balken. Ein Image lädt im SkeletonMode nichts. Es nimmt die Größe aus width und height. Eine fehlende Angabe ergibt sich aus aspectRatio, sonst aus dem Seitenverhältnis 16:9. Ohne beide Angaben füllt es die verfügbare Breite. Buttons, als Button gestaltete Links und ContextMenu-Trigger lassen sich nicht bedienen.

Navigation und Status

Navigationen, Breadcrumbs und Tabs behalten ihre Struktur. Ihre Einträge werden zu Balken und lassen sich weder fokussieren noch auswählen. Ein aktiver Eintrag ist nicht hervorgehoben. Status-Components wie Alert oder ProgressBar zeigen keine Statusfarbe: Die ProgressBar zeigt ihre Leiste ohne Füllung und ohne Wert, LoadingSpinner und AlertIcon werden zu runden Flächen.

Properties