Loader - Docs - Artefact

Loader

Feedback

Presentational

Introduction

A utility component that manages the visual state of a Spinner and associated text.

Usage

Loading data...

import { Loader, Spinner } from "../components/ui";

export default function MyPage() {
  return <Loader text="Loading data..." />;
}

Custom Spinner and Placement

import { Loader, Spinner } from "../components/ui";

export default function MyPage() {
  return (
    <Loader
      spinner={<Spinner size="lg" colorPalette="blue" />}
      spinnerPlacement="end"
    >
      Please wait
    </Loader>
  );
}

CMS Page Builder

This component is available as a loader block in the Page Builder (content/pages/*.json) — the CMS text field maps directly to Loader's own text prop:

{
  "type": "loader",
  "text": "Checking availability...",
  "spinnerPlacement": "start"
}

Props

Prop	Type	Description
`children`	`any`	Text content to be rendered alongside the spinner.
`spinner`	`Child`	Custom spinner element. Defaults to `<Spinner size="inherit" />`.
`text`	`Child`	Alternative prop for text content.