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.
• 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.

Properties