Loader

v2.0.2

Documentation Under Review

Catalyst Loader provides a unified solution for handling loading, error, and empty-result states — automatically rendering the correct state based on isLoading, error, and resultsLength props, with built-in design tokens and CVA variants.

Installation

npm install @pmi/catalyst-loader

import { Loader, LoaderText } from '@pmi/catalyst-loader';

Common Patterns

Error

Display an error message with an icon when something goes wrong.

Not Found

Display a message when no results are found.

Custom Messages

Customize the text for each state to provide better context to users.

API Reference

Loader is a compound component. The sections below document each part.

Loader

The outer wrapper that conditionally renders based on isLoading, error, and resultsLength. Only one state is shown at a time: loading takes highest priority, then error, then not-found.

LoaderText

Renders the status text inside a <span>. Automatically selects a default message when children is not provided.

Accessibility

Loader is designed to meet WCAG 2.2 AA standards.

ARIA

• Loader renders a plain <div>. For dynamic content that updates after the initial render, wrap with an aria-live="polite" region so assistive technologies announce state changes.
• Icon children (e.g. AttentionIcon, Spinner) should carry their own accessible labels or be hidden with aria-hidden when the accompanying LoaderText provides sufficient context.
• The component is display-only and non-interactive — no keyboard handling is required.
• Catalyst provides visual styling tokens; consuming teams are responsible for correct aria-live semantics and any surrounding landmark structure.

Choosing the Right Component

Use Loader when you need a lightweight inline indicator for data-fetching states. Reach for a different primitive when:

Related

• Spinner
• Skeleton
• Alert