/// Feedback
LoadingOverlay
A scrim + centered spinner that covers its positioned parent and blocks interaction during loading.
import { LoadingOverlay } from "@protocore/pds";Basics
Mount it inside a position: relative container and toggle visible. It covers the parent with a canvas scrim and a centered spinner, blocking clicks on the content beneath.
Treasury
Balance 1,204,882 PROTO across 3 accounts.
Blur and a visible label
Set blur to frost the content behind the scrim, and showLabel to render the status text beneath the spinner. Otherwise the label is announced to screen readers only.
Epoch 812
Aggregating validator attestations for the current epoch.
A custom indicator
Swap the default ring for your own indicator via the spinner slot — for example a determinate ProgressBar when you know how far along the work is.
Snapshot import
Restoring state from the latest chain snapshot.
When to use it
LoadingOverlay is for a *bounded* region that is busy — a card refreshing its data, a form submitting, a panel re-fetching. It sits above that region's own content so the user keeps their spatial context, unlike a full-page loader.
Use it when the wait is short and you have nothing partial to show. If you can show the *shape* of the incoming content, a LoadingSkeleton is less jarring. If the work is long and measurable, prefer a ProgressBar. Always give the overlay a positioned parent — it is position: absolute and fills its nearest positioned ancestor.
Usage
Do
- Give the parent `position: relative` so the overlay fills that region.
- Use it for short, indeterminate waits on a bounded surface.
- Set `blur` when the content behind would distract.
- Swap in a determinate indicator via `spinner` when progress is known.
Don't
- Mount it on a positioned parent, or it covers the wrong box.
- For long, measurable work, show progress instead.
- Where content could show as a skeleton, use that instead.
- Keep the announced label; the scrim alone doesn't convey "loading".
Accessibility
- The scrim is `role="presentation"` with `aria-busy="true"`, marking the region as busy without adding a spurious landmark.
- It contains a polite `role="status"` live region carrying the `label` (default "Loading"), so assistive tech announces the busy state.
- By default the label is visually hidden; set `showLabel` to render it beneath the spinner as mono UPPERCASE text.
- The overlay covers the region visually but does not trap focus — disable or `inert` the underlying controls if they must not be reachable while busy.
- The spinning ring is `aria-hidden`; the announcement comes from the status label, not the animation.
LoadingOverlay props
| Prop | Type | Default | Description |
|---|---|---|---|
blur | boolean | false | Blur the content behind the scrim (backdrop-filter). |
className | string | — | |
label | string | Loading | Status text announced to assistive tech and shown under the spinner if `showLabel`. |
showLabel | boolean | false | Render the label visibly beneath the spinner (otherwise it is screen-reader-only). |
size | enum | md | Spinner diameter preset. |
spinner | ReactNode | — | Replace the default spinner with your own indicator (e.g. a ProgressBar). |
style | CSSProperties | — | |
visible | boolean | true | Whether the overlay is shown. When `false`, nothing renders. |