Loading States

Animated loading states for waiting while an AI agent works — pixel grid, shimmer label, optional elapsed timer.

Drive

Chevron pixel wave — variant="drive" (default).

Loading…

Installation

CLI

npx @sonojs/ui@latest add loading-states

Usage

loading-states.tsx

import { LoadingState } from "@/components/sonojs/loading-states"

export function Example() {
  return (
    <LoadingState
      variant="drive"
      label="Working"
      showElapsed
    />
  )
}

Props

Prop	Type	Default	Description
label	string	"Working"	Work message (shimmer) announced to assistive tech.
variant	"drive" · "dots" · "orbit"	"drive"	Pixel grid animation treatment.
showElapsed	boolean	true	Show the elapsed duration beside the label.
className	string	—	Merge classes on the root.