# LoadingState

> What a surface shows while it loads: a spinner, a skeleton of its content, or progress.

- **Level**: molecule · **Status**: stable · **Role**: feedback
- **Import**: `import { LoadingState } from "@rrios-forge/ui/molecules/loading-state";`
- **Source**: `packages/ui/src/molecules/loading-state`

What a surface shows while it loads: a skeleton of its content when the layout is known, a spinner for short waits, or a progress bar with a caption when the work can be measured. Screen readers hear that the region is busy and when it is done.

## Use it for

- Empty / loading state → `EmptyState` / `LoadingState` or `Skeleton`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `type` | — | `spinner` `skeleton` `progress` | `skeleton` | Which loading indicator. |

## Stories

- [Playground](/?path=/story/components-molecules-loadingstate--playground) · frame: `/iframe.html?id=components-molecules-loadingstate--playground&viewMode=story`
- [Spinner](/?path=/story/components-molecules-loadingstate--spinner) · frame: `/iframe.html?id=components-molecules-loadingstate--spinner&viewMode=story`
- [Skeleton](/?path=/story/components-molecules-loadingstate--skeleton) · frame: `/iframe.html?id=components-molecules-loadingstate--skeleton&viewMode=story`
- [Skeleton fallback](/?path=/story/components-molecules-loadingstate--skeleton-fallback) · frame: `/iframe.html?id=components-molecules-loadingstate--skeleton-fallback&viewMode=story`
- [Progress](/?path=/story/components-molecules-loadingstate--progress) · frame: `/iframe.html?id=components-molecules-loadingstate--progress&viewMode=story`
- [Full page](/?path=/story/components-molecules-loadingstate--full-page) · frame: `/iframe.html?id=components-molecules-loadingstate--full-page&viewMode=story`
- [Inline](/?path=/story/components-molecules-loadingstate--inline) · frame: `/iframe.html?id=components-molecules-loadingstate--inline&viewMode=story`

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).