AI loading

Inky at work and a rotating status line while an assistant works.

Thinking…

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/ai-loading.json

Usage

Drop it wherever an assistant is working; pass the states it should cycle through.

TSImport

import { AiLoading } from "@/components/blocks/ai-loading";

TSExample

import { AiLoading } from "@/components/blocks/ai-loading";

export function Waiting() {
  return (
    <AiLoading states={["Thinking", "Reading the brief", "Drafting a reply"]} />
  );
}

Composition

Inky above the thinking card's rotating status line.

AiLoading                 (role="status", centred column)
├── Inky                  (emotion "thinking", action "juggle" — pinned)
├── ThinkingStates        (from ai-thinking-card — rotating shimmer line)
└── elapsed               (useElapsed from loading-state — `showElapsed`)

Default

Laid out like an empty state: Inky at 64px, thinking and juggling, and under it the thinking card's rotating status line at the Empty title's size. He is pinned, so every loader looks the same — no hover reactions, easter eggs or seasonal outfit mid-wait.

Thinking…

Emotion and move

`emotion` picks any of Inky's 30 faces and `action` any looping move, for a wait with a different mood.

Reading the brief…

Sizing the kit…

With timer and a thought

`showElapsed` adds LoadingState's live elapsed timer under the line, in mono tabular figures. `thought` puts a bubble of text over Inky.

Thinking…0.0s

Compact

`avatarSize` (a multiple of 32) and `textClassName` scale it down for a chat bubble or a card. `animateAvatar={false}` freezes Inky.

Thinking…

API Reference

Props for the AiLoading block.

AiLoading

Prop	Type	Default	Description
`states`	readonly string[]	a generic set	Status lines to rotate through. Each trails off with an ellipsis unless it already ends in punctuation.
`stateDuration`	number	2000	How long each state holds before the next swaps in, ms.
`emotion`	InkyEmotion	"thinking"	Inky's face — any of INKY_EMOTIONS.
`action`	InkyAction	"juggle"	What Inky does while it waits — a looping move.
`thought`	string	—	A thought bubble over Inky, with this text in it.
`avatarSize`	number	64	Inky's frame side, px. Keep it a multiple of 32.
`animateAvatar`	boolean	true	Let Inky move. `false` freezes him. Reduced motion drops him to 2 frames a second.
`textClassName`	string	Empty title size	Classes for the status line — size, weight, colour. Merged after the defaults.
`showElapsed`	boolean	false	Show a live elapsed timer under the line.
`className`	string	—	Merged onto the column. Any other div attribute passes through.