import {
  SkeletonText,
  Text,
} from "@mittwald/flow-react-components";

<Text>
  <SkeletonText />
</Text>

Best Practices

• Platziere den SkeletonText in der Component, die später den Text enthält (z. B. Text‍ oder Heading‍). So entspricht seine Höhe der finalen Typografie und es entsteht kein Layout-Sprung.
• Wähle die Breite ungefähr passend zur Länge des erwarteten Textes.
• Verwende pro Textblock nur wenige Zeilen. Zwei bis drei genügen, um den Inhalt anzudeuten, ohne visuelle Unruhe zu erzeugen.
• Variiere bei mehreren Zeilen die Breite der letzten Zeile, damit der Block wie echter Fließtext wirkt.
• Setze den SkeletonText nur für das initiale, kurzzeitige Laden ein. Für andere Lade- oder Feedbackprozesse eignet sich etwa der LoadingSpinner‍.

SkeletonText vs. Skeleton

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

Breite

Ohne weitere Angabe füllt der SkeletonText die volle Breite des umgebenden Elements. Über das width-Property lässt sich die Breite anpassen, damit die Vorschau der erwarteten Textlänge entspricht.

Kombiniere mit ...

Heading

Platziere einen SkeletonText innerhalb einer Heading‍, damit er deren Schriftgröße übernimmt.

Properties

Accessibility