Stack Loader

Overview

Stack Loader gives a real wait a visible state: panels stack during a real transition.

Use it for route latency, upload progress, asset warm-up, data loading, or WebGL initialization. Do not add a fake preloader to a fast page just to make it feel designed.

The thing to watch is dishonesty. Bind the loader to real state, use aria-busy where the region is updating, and never let a progress number claim completion before the content is ready.

Install

Usage

Component Code

Example Production Use Case

Use this as loading-state implementation guidance. Verify the shipped progress model, aria-busy behavior, live-region text, timer cleanup, skeleton fallback, and reduced-motion state before relying on exact props, defaults, imports, or installation steps. Determinate progress must be tied to a real signal.

Best Used For

• Route and asset waits where a short branded cover is honest and state-driven.
• Experiences where the loader disappears as soon as the real task completes.
• Stack Loader makes real waiting visible without manufacturing delay.

Not For

Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content.

Performance Budget

Tie animation to real load state, clean up timers, and avoid blocking first paint.

Accessibility and Mobile

Use aria-busy on loading regions and concise status text. On mobile and reduced motion, prefer static progress text or skeletons.

Common Mistakes

• Using Stack Loader on a page that already loads quickly.
• Faking determinate progress.
• Announcing every animation frame to assistive technology.