playbooks

home / skills / rohunvora / cool-claude-skills / ai-loading-ux

ai-loading-ux skill

/skills/ai-loading-ux

This skill helps design AI loading UX by guiding reasoning displays, progress steps, and streaming indicators to reduce perceived wait time.

npx playbooks add skill rohunvora/cool-claude-skills --skill ai-loading-ux

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
4.5 KB
---
name: ai-loading-ux
description: Design AI loading, thinking, and progress indicator UX. Use when explicitly asked to improve AI waiting states, add thinking indicators, or design loading UX for AI interfaces. Covers reasoning display (chain-of-thought), progress steps, streaming states, and the "elevator mirror effect" for reducing perceived wait time.
---

# AI Loading UX

Design patterns for showing users what's happening while waiting for AI output.

## Decision Framework

First, identify which pattern category applies:

| User is waiting for... | Pattern Category | Key Goal |
|------------------------|------------------|----------|
| AI reasoning/thinking | **Reasoning Display** | Build trust through transparency |
| Multi-step task completion | **Progress Steps** | Show advancement toward goal |
| Content generation/streaming | **Streaming States** | Reduce perceived wait time |
| Background processing | **Status Indicators** | Confirm work is happening |

## Core Principles

### 1. The Elevator Mirror Effect
Users waiting for AI feel time pass slower. Give them something to watch/read—animated indicators reduce *perceived* wait time even when actual time is unchanged.

### 2. Progressive Disclosure
- Show condensed indicator by default ("Thinking...")
- Make details *available* but not forced
- Let curious users expand; don't burden everyone

### 3. More Transparency ≠ Better UX
Balance visibility with cognitive load. Users want answers, not reasoning—but they want to *trust* the answer came from good reasoning.

### 4. Signal Completion Clearly
Users must know when processing ends. Ambiguous end states frustrate users.

## Pattern Quick Reference

### Reasoning Display (Chain-of-Thought)
When AI is "thinking" through a problem. See [references/reasoning-patterns.md](references/reasoning-patterns.md).

**Best approach (Claude-style):**
- Hidden by default, expandable on demand
- Structured bullets when expanded
- Time counter or progress indicator
- Clear "done" state

**Anti-patterns:**
- Wall of streaming text (overwhelming)
- Scrolling too fast to read
- No expand option (feels opaque)
- No clear end state

### Progress Steps
When AI completes sequential tasks. See [references/progress-patterns.md](references/progress-patterns.md).

**Best approach:**
- Show current step + total steps
- Mark completed steps visually
- Show what's actively happening
- Allow step-level details on expand

### Streaming States
When content generates token-by-token. See [references/streaming-patterns.md](references/streaming-patterns.md).

**Best approach:**
- Typing cursor or text animation
- Smooth token appearance (not jarring)
- Skeleton for expected content shape
- "Stop generating" escape hatch

### Status Indicators
When background work happens. See [references/status-patterns.md](references/status-patterns.md).

**Best approach:**
- Subtle but visible animation
- Brief description of current action
- Don't block user from other actions
- Notify on completion

## Implementation Checklist

When implementing any AI loading state:

1. [ ] **Identify pattern category** from decision framework above
2. [ ] **Choose visibility level**: always visible, expandable, or minimal
3. [ ] **Add motion**: animation reduces perceived wait (but keep it subtle)
4. [ ] **Show progress**: time elapsed, steps completed, or content streamed
5. [ ] **Signal completion**: clear visual/state change when done
6. [ ] **Provide escape**: stop/cancel for long operations
7. [ ] **Handle errors**: don't leave user in permanent loading state
8. [ ] **Test on slow connections**: ensure graceful degradation

## Product Comparisons (Reference)

| Product | Approach | Strength | Weakness |
|---------|----------|----------|----------|
| Claude | Hidden reasoning, expandable, structured bullets | Low cognitive load | Can feel opaque |
| ChatGPT | Brief labels, auto-collapse | Unobtrusive | Less transparent |
| DeepSeek | Full streaming reasoning | Maximum transparency | Overwhelming |
| Gemini | User-scrolled, numbered steps | Clear structure | Unclear completion |

## Usage

Read the relevant reference file for your pattern category:
- [references/reasoning-patterns.md](references/reasoning-patterns.md) - Chain-of-thought, thinking indicators
- [references/progress-patterns.md](references/progress-patterns.md) - Step sequences, task completion
- [references/streaming-patterns.md](references/streaming-patterns.md) - Token streaming, content generation
- [references/status-patterns.md](references/status-patterns.md) - Background processing, polling states

Overview

This skill designs AI loading, thinking, and progress indicator UX for TypeScript projects. It provides concrete patterns for reasoning displays, progress steps, streaming states, and background status indicators. The goal is to reduce perceived wait time, build user trust, and clearly signal completion. Use it when you need polished waiting-state behavior for AI-driven interfaces.

How this skill works

The skill inspects the user's waiting scenario and maps it to one of four pattern categories: Reasoning Display, Progress Steps, Streaming States, or Status Indicators. For each category it prescribes visibility level (minimal, expandable, or full), motion and animation guidance, progress signals (time, steps, streaming tokens), and completion/error handling. It includes an implementation checklist and practical anti-patterns to avoid. Code-friendly recommendations are tailored for integration into TypeScript frontends.

When to use it

  • When the model is performing step-by-step reasoning and you need to show provenance without overwhelming users
  • When a task involves multiple sequential steps and users should see advancement toward completion
  • When content is generated progressively (token-by-token) and streaming feedback reduces perceived delay
  • When background processing runs asynchronously and users need a subtle confirmation that work is happening
  • When perceived wait time is a UX problem and the elevator mirror effect can help

Best practices

  • Default to a condensed indicator like “Thinking…” and make detailed reasoning expandable on demand
  • Use subtle animation to reduce perceived wait time but avoid distracting motion
  • Show concrete progress: elapsed time, completed steps, or streaming tokens, and mark clear completion
  • Provide an escape hatch (stop/cancel) for long operations and handle errors to avoid stuck states
  • Test loading states on slow networks and with interrupted streams to ensure graceful degradation

Example use cases

  • Show expandable chain-of-thought bullets when a model solves math or logic problems, with a time counter and clear done state
  • Display current step out of total steps during multi-step document generation, with the ability to expand step details
  • Stream generated article text with a typing cursor, skeleton layout, and a ‘Stop generating’ button
  • Show a subtle background status indicator for long data-sync jobs that does not block other UI actions
  • Use animated micro-interactions (elevator mirror) during brief waits to improve perceived responsiveness

FAQ

Should I always show the model's chain-of-thought?

No. Hide reasoning by default and make it expandable. Only expose structured, concise reasoning when it adds trust or is requested.

How do I avoid overwhelming users with streaming text?

Smooth token appearance, skeletons for expected content shape, and the option to pause or stop streaming prevent overload.