'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Feedback
LoadingOverlay
Covers a region while it loads, keeps the layout in place and tells screen readers it is busy.
Ant Design: Spin with children
import { LoadingOverlay } from '@alea/ui';
Examples
Reload in place
The table stays where it is; it can't be clicked while it loads.
Plugin | Users |
|---|---|
| Contrast Checker | 3,410 |
| Palette Generator | 1,240 |
Props
LoadingOverlay props
Covers a region while it loads, keeps it in place and tells screen readers it is busy (Mantine LoadingOverlay, MUI Backdrop).
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The content it covers. |
isLoadingrequired | boolean | - | Shows the overlay and marks the content busy. |
blur | boolean | true | Blur the content under it. Default true. |
className | string | - | |
label | string | 'Loading' | What is loading, for screen readers. Default "Loading". |
Accessibility
- The region gets aria-busy and its content becomes inert, so nothing inside can be focused or clicked while loading.
Do and don't
Do
- Use it for a region that reloads in place (a table after a filter).
Don't
- Don't cover the whole page for a small update.