PageLoader

ReactProps

Github Storybook Markdown Copy for LLM

A PageLoader is used when retrieving data or performing a slow action related to the entire page. For inline loading, use the LoadingIndicator component.

Import

import { PageLoader } from "@cfa/react-core";

Live Editor

Guidelines

When to use

• PageLoader is for a wait that affects the entire page, such as retrieving data or performing a slow action.

Do

• Keep the loading view uncluttered. Do not show competing page chrome during the wait.

Avoid

• Using PageLoader for an inline or section-level wait. Use LoadingIndicator.
• Using PageLoader when a percentage-based bar fits the task better. Use ProgressBar.
• Showing it for actions under about 1 second. The flash is more distracting than the wait.

Examples

Size

There are three sizes of PageLoader: "md" by default, and "sm" | "lg".

Custom Icon

Custom content can replace the default CFA Symbol logo in the center of the loader.

Accessibility

• Uses the React Aria ProgressBar in indeterminate mode, so the semantic role is progressbar.
• Provide an accessible name via aria-label or aria-labelledby.