ai-loading-states

name	ai-loading-states
description	Use when implementing loading states for AI operations.
metadata	{"id":"ai-loading-states","category":"ai-intelligence","pattern":"AI Loading States","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/ai-intelligence/ai-loading-states","sourcePath":"apps/web/content/patterns/ai-intelligence/ai-loading-states.mdx"}

AI Loading States

Loading states for AI operations

What it solves

A AI Loading States pattern helps teams create a reliable way to communicate request progress, streaming readiness, and intermediate AI work without pretending to know the exact finish time. It is most useful when teams need long-running generation. Compared with adjacent patterns, this pattern should reduce friction without hiding the state, rules, or recovery paths people need to keep moving.

When to use

• Long-running generation
• Tool calls and retrieval
• Stream setup before first tokens arrive

When to avoid

• Avoid adding AI-specific UI when a standard non-AI workflow would be clearer and more reliable.
• Do not expose advanced controls unless users can actually benefit from them.
• Do not hide model uncertainty behind polished visuals alone.

Implementation workflow

1. Confirm the pattern matches the problem and constraints before copying the example.
2. Start from the anatomy and examples in references/pattern.md, then choose the smallest viable variation.
3. Apply accessibility, performance, and interaction guardrails before layering visual polish.
4. Use the testing guidance to verify behavior across keyboard, screen reader, responsive, and failure scenarios.