Loading Overlay

Blocks interaction while an operation runs. No brand animation: just a spinner.

FeedbackoriginalMITChangelog Registry JSON

Overview

`LoadingOverlay`: wraps a region. While isLoading, its children stay visible under a veil with a spinner and label (default "Loading…", announced via role="status"), become inert, and the region is aria-busy.
`LoadingScreen`: the same for the whole app, as a non-dismissable modal (focus held, page hidden from assistive tech, scroll locked) — for operations that must finish before anything else, like saving a status change.

Pass a translated label as needed.

Installation

CLI

Manual

1

Register the @fma-ds namespace in components.json (once)

components.json

{  "registries": {    "@fma-ds": "https://ds.fmartinsandre.dev.br/r/{name}.json"  }}

2
Add the item
```
pnpm dlx shadcn@latest add @fma-ds/loading-overlay
```
Files land in components/fma-ds/loading-overlay.tsx; npm and registry dependencies are installed along with them.

Dependencies

npm: cn@^0.5.0lucide-react@^1.61.0react-aria-components@^1.22.1
Registry: None