# LoadingSpinner

Der LoadingSpinner signalisiert, dass Inhalte im Hintergrund geladen werden.

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

<LoadingSpinner />
```

---

# Best Practices

- Setze den LoadingSpinner nur bei unbestimmter Dauer ein. Bei konkret
  darstellbarem Fortschritt eignet sich eine
  [ProgressBar](https://flow.mittwald.de/04-components/status/progress-bar), bei kurzem initialem Laden
  mit bekannter Layout-Struktur ein [Skeleton](https://flow.mittwald.de/04-components/content/skeleton).
- Setze ihn nur bei relevanter Ladezeit ein, als Faustregel ab etwa einer
  Sekunde. Bei sehr kurzen Ladezeiten bringt visuelles Feedback meist keinen
  Mehrwert.
- Kombiniere ihn bei längeren Ladezeiten mit einer
  [IllustratedMessage](https://flow.mittwald.de/04-components/content/illustrated-message). So erhält
  der User zusätzliche Informationen.
- Platziere ihn dort, wohin der User nach dem Laden schauen soll.
- Zeige nicht zu viele Spinner gleichzeitig. Mehrere gleichzeitig wirken schnell
  unruhig.

---

# Color

Im Standardfall wird der LoadingSpinner in der Color **Default** verwendet – ein
neutraler Ton mit guter Sichtbarkeit, der nicht von der übrigen
Benutzeroberfläche ablenkt.

## Light und Dark

Auf farbigen oder dekorativen Hintergründen kann der LoadingSpinner in **Light**
oder **Dark** dargestellt werden. Welche Color wann passt, beschreibt
[Color](https://flow.mittwald.de/02-foundations/01-design/02-colors#light-und-dark-color).

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

<LoadingSpinner color="light" />
```

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

<LoadingSpinner color="dark" />
```

---

# Properties

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `"default" \| "dark" \| "light" \| "dark-static" \| "light-static"` | `"default"` | The color of the loading spinner. |
| `size` | `"s" \| "m" \| "l"` | `"m"` | The size of the icon. |
| `status` _(deprecated)_ | `"info" \| "success" \| "warning" \| "danger" \| "unavailable"` | - | The elements status. @deprecated Use `color` instead. |
| `wrapWith` | `ReactElement<unknown, string \| JSXElementConstructor<any>>` | - | A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup. |

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