LoadingState

An inline loader for long-running agent work: a 3×3 pixel-grid animation, a shimmering label and a live elapsed timer.

When to use

• Show that an agent is busy on something that takes seconds to minutes (indexing, drafting, running evals), where the elapsed time is useful.
• Pick a pattern: Drive (square cells, chevron wavefront), Dots (the same wave on round cells) or Orbit (a comet lapping the grid edge).
• Not for a step-by-step trace — use ThinkingState. Not for determinate progress — use Progress or ProgressRing. Not for content placeholders — use Skeleton.

Usage

import LoadingState from "@/components/iris/loading-state/loading-state";

h(LoadingState, { variant: "Drive", label: "Scanning ~/Documents" });
h(LoadingState, { variant: "Orbit", label: "Clustering stories" });

Props

Prop	Type	Default	Description
label	string	"Clustering stories" ("Transcribing the recording" for Surfer)	The shimmering status text. Pass your own.
variant	"Drive" | "Dots" | "Orbit" | "Surfer"	"Drive"	Grid pattern. Surfer adds a video card below the Drive loader.
videoSrc	string	—	Video for the Surfer variant's card: muted, looping, autoplaying.

Notes

• Surfer needs a videoSrc. Without one, or if the video fails to load, its card shows the loader and "Video unavailable".
• The root is an <output> (role="status" on the Surfer wrapper, which holds block content). The timer counts up from mount in tenths of a second (12.4s, then 1m 3.2s) and restarts when the component remounts.
• The bundle's global reduced-motion rule stops the grid on its dim frame and stops the label shimmer, but the timer keeps ticking.
• The grid cells use --ink at low opacity. The label shimmer runs between --ink-3 and --ink, and the timer uses --font-code in --ink-3.