# Skeleton

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

```tsx
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](https://flow.mittwald.de/04-components/content/avatar) oder
  [Images](https://flow.mittwald.de/04-components/content/image), 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](https://flow.mittwald.de/04-components/status/loading-spinner).
- 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](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy)).

## Skeleton vs. SkeletonText

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

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

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

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

---

# Benutzerdefinierte Größe

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

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

<>
  <Skeleton height="100px" />
  <Skeleton height="100px" width="100px" />
</>
```

---

# Properties

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

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