Components › Foundation › AI Loading States
AI02 · Transparency

AI Loading States

Purpose Phase-specific loading indicators for LLM inference — distinguishes "reasoning," "retrieving," and "generating" so users understand what kind of wait they are experiencing.
Use when Model is actively processing a request. Use phase-appropriate variant.
Do not use For streaming output (use AI01); for agent multi-step execution (use HC03).
Failure mode prevented Users abandoning or retrying because they cannot distinguish a thinking model from a broken one.
Example Dark Academia
Dark Academia
The Atelier
Neon Tide
The Archive
Candlelight
The Conservatory
Reasoning Analyzing 3 data sources
Retrieving Context
Overview
thinking — model is reasoning through a problemretrieving — model is fetching context or documentsgenerating — output is being produced (pre-stream)
Design rule

Loading states must communicate phase, not just presence. Generic spinners are not acceptable for AI interfaces.

Theming API

Override these CSS custom properties to apply your own visual treatment without touching the component's behavioral contracts.

Shared semantic tokens

Token Controls
--rad-surface-card Card background
--rad-border-subtle Card border
--rad-color-approve Thinking dots color
--rad-color-text-meta Label and detail text
--rad-radius-card Card border radius

Component-scoped tokens

Token Controls
--rad-skeleton-base Skeleton line base color
--rad-skeleton-shimmer Skeleton shimmer highlight color

"*You are building the UI for when you are thinking. No pressure. Take your time.*"

← Previous Streaming Text Next → Prompt Input

Intellectual Property

RAD is the original work of Jackie Curry. All rights reserved. No portion may be reproduced, adapted, or incorporated into any product or system without express written permission.

Permitted: citation in academic or editorial contexts with full attribution.

Licensing

© 2025 Jackie Curry. All rights reserved. Publication date: 2025.

For licensing inquiries, connect on LinkedIn →