# LoadingOverlay

Blocks pointer interaction over its children while async work runs and shows a spinner. Toggle with `visible`; set `label` for the spinner’s accessible name.

## Examples

### Default

A compact content box with the overlay on.

```tsx
import { LoadingOverlay } from '@var-ui/react';

<LoadingOverlay visible label="Loading">
  <div style={{ width: 200, height: 80 }}>Content</div>
</LoadingOverlay>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Visible overlay

Pass `visible` over a bordered content surface so the backdrop and spinner cover the region being loaded.

```tsx
import { LoadingOverlay } from '@var-ui/react';

<LoadingOverlay visible label="Saving changes">
  <div style={{ width: 280, minHeight: 120, padding: 16 }}>
    <strong>Account settings</strong>
    <p>Display name, email, and notification preferences.</p>
  </div>
</LoadingOverlay>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  |  |
| className | string \| undefined | no |  |  |
| label | string \| undefined | no | Loading | Accessible label for the loading spinner. |
| visible | boolean \| undefined | no |  | When true, the overlay blocks pointer events and shows a spinner. |

## Accessibility

When `visible`, the overlay sets `aria-busy="true"` and the spinner uses `label` (default `"Loading"`). Keep meaningful content as children so the blocked region remains in the document; avoid nesting interactive controls that stay focusable while the overlay is shown.