# Skeleton

Das Skeleton zeigt als Platzhalter eine vereinfachte Vorschau der Benutzeroberfläche, bis der Content vollständig geladen ist.

## Overview

# Playground

Verwende `<Skeleton />`, um ein Skeleton anzuzeigen.

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

<Skeleton />
```

---

# 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" />
</>
```

---

# Accessibility

Das Skeleton verwendet das Property `aria-hidden`, damit es vom Screenreader
ignoriert wird.

Die Accessibility eines Ladezustands soll **nicht** vom Skeleton geregelt
werden.

Um Screenreadern mitzuteilen, dass Inhalte noch geladen werden, sollte das
Property `aria-busy` verwendet werden. Dieses wird auf `false` gesetzt, sobald
der Ladevorgang abgeschlossen ist (s.
[MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-busy)).