# SkeletonText

Der SkeletonText zeigt eine vereinfachte Vorschau einer Textzeile, bis der Content geladen ist.

```tsx
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](https://flow.mittwald.de/04-components/content/text) oder
  [Heading](https://flow.mittwald.de/04-components/content/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](https://flow.mittwald.de/04-components/status/loading-spinner).

## SkeletonText vs. Skeleton

SkeletonText und [Skeleton](https://flow.mittwald.de/04-components/content/skeleton) haben dasselbe
Erscheinungsbild, unterscheiden sich aber in ihrer Größe.

**Verwende SkeletonText für ...**

- Textzeilen, deren Höhe sich aus der umgebenden Typografie ergibt.
- Überschriften, Fließtext und Labels.

**Verwende Skeleton für ...**

- Flächen, deren Größe du selbst festlegst.
- Bilder, [Avatare](https://flow.mittwald.de/04-components/content/avatar) und andere grafische Elemente.

---

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

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

<>
  <Text>
    <SkeletonText />
  </Text>
  <Text>
    <SkeletonText width="60%" />
  </Text>
  <Text>
    <SkeletonText width="12em" />
  </Text>
</>
```

---

# Kombiniere mit ...

## Heading

Platziere einen SkeletonText innerhalb einer
[Heading](https://flow.mittwald.de/04-components/content/heading), damit er deren Schriftgröße
übernimmt.

```tsx
import {
  Heading,
  SkeletonText,
} from "@mittwald/flow-react-components";

<Heading level={1}>
  <SkeletonText width="8em" />
</Heading>
```

---

# Properties

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

### Accessibility

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