# Loading overlay (goodtabs UI)

Covers one region with a spinner while it loads, never the whole page.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/loading-overlay.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/loading-overlay`

## Usage

```tsx
import { LoadingOverlay } from "@/components/ui/loading-overlay"

<LoadingOverlay loading={isPending} label="Refreshing">
  <ReportTable />
</LoadingOverlay>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| loading | `boolean` | `false` | Shows the overlay, sets aria-busy and makes the content inert. |
| label | `string` | `"Loading"` | Status text announced and shown beside the spinner. |

## When to use

- A panel, table or card refetches and the rest of the page should stay usable
- Keeping stale content visible underneath while new data arrives
- Any region whose size you do not want to change while loading

## When not to use

- First load of a list, where a skeleton shows the shape better
- Blocking the whole page, which this piece deliberately cannot do

## Notes for agents

- The overlay is absolute inside the wrapper, so the wrapper is relative and sized by its children
- While loading the content is inert: no focus, no clicks, no find in page targets
- Pass rounded and border classes on the wrapper; the overlay inherits its radius
- The spinner stops under reduced motion and the label still shows

Docs: https://ui.goodtabs.co/components/loading-overlay