Motion and Loading

Payload's loading components communicate that work is in progress, while its motion helpers make layout changes easier to follow.

Import

Loading overlay

LoadingOverlay renders the visual loading surface directly. Use LoadingOverlayToggle inside the Admin Panel to update Payload's shared loading overlay instead.

FormLoadingOverlayToggle connects that shared overlay to a Payload form's loading and processing states. It must be rendered inside the Admin Panel's form and loading providers.

Staggered shimmers

Use ShimmerEffect for one placeholder or StaggeredShimmers for a repeated set. Match their dimensions to the content they temporarily replace to reduce layout movement.

Route progress

ProgressBar displays progress for transitions started within RouteTransitionProvider. Payload's Link component starts this transition automatically. Use startRouteTransition from useRouteTransition when navigation begins from another control.

The preview simulates a slower route so the delayed progress indicator remains visible long enough to inspect.

Other helpers

• AnimateHeight animates a container when its content changes height.
• ShimmerEffect documents the single-placeholder API in more detail.

Common props

These are the props most commonly used. See the exported types in @payloadcms/ui for the complete list.

LoadingOverlay

LoadingOverlayToggle

StaggeredShimmers

* An asterisk denotes that a prop is required.

Accessibility

Loading visuals should accompany, not replace, meaningful status text. Prevent interaction when an action cannot safely continue, and keep the loading state visible only while work is actually pending.