Loader
Introduction
A visual loading layout utility component that pairs a rotating Spinner element with companion status message text. Primarily used to manage user expectations during server fetches, file operations, state transitions, or content processing states within layout blocks.
The Loader component is fully integrated as a loader block in the Page Builder, enabling content authors and developers to easily configure visual status text and spinner alignments directly within the CMS page schemas.
Usage
These examples illustrate how content editors bind and structure interactive loaders.
1. Standard Center Status Loader
A classic loading indicator with standard status text, suitable for major panel entries, content updates, or lazy-loaded blocks.
{
"type": "loader",
"text": "Loading workspace data...",
"spinnerPlacement": "start"
}
2. Loader with Trailing Spinner (End Alignment)
Features the visual spinner aligned after the status message, providing an alternative visual flow for card footers or inline button actions.
{
"type": "loader",
"text": "Please wait while we process your request",
"spinnerPlacement": "end"
}
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Status Text (text) | string | - | The message text displayed adjacent to the rotating spinner. |
Spinner Placement (spinnerPlacement) | select | "start" | Alignment of the spinner relative to the accompanying text. • Options: "start", "end". |
Developer Notes & Accessibility
- Hydration Free (Static-Only): The Loader is a purely presentational layout helper designated as a Static-Only component (
Tier 3). It compiles down to standard server-side HTML/CSS markup with absolutely zero interactive client-side JavaScript. - WAI-ARIA Compliance: Under the hood, this component is designed for assistive technologies, compiling with appropriate live-region or busy container parameters (e.g.
aria-busy="true",role="status"on parent containers) ensuring smooth communication of ongoing background activities.