⚡ UX Improvement: AI Panel Should Use Optimistic Loading Instead of Immediate Spinner

[dory-finn]

⚡ UX Improvement: AI Panel Should Use Optimistic Loading Instead of Immediate Spinner

Background

Currently, when opening the AI panel in Dory (right sidebar), the UI immediately displays a loading spinner before any meaningful interaction or content appears.

This creates a "not responsive / not following user action" feeling, especially when:

• The user just clicked the AI icon
• No query has been executed yet
• There is no actual content to load

From a UX perspective, this makes the product feel slower than it actually is.

Problem

Current Behavior

• User clicks AI button
• Panel opens
• Immediate loading spinner is shown
• No context or content is visible
• User perceives delay / lag

Issues

• ❌ Violates "instant feedback" UX principle
• ❌ Feels like blocking operation
• ❌ Not aligned with actual state (nothing to load yet)
• ❌ Creates unnecessary cognitive friction

---

Expected Behavior

Use optimistic rendering instead of showing a spinner immediately.

Desired UX Flow

1. User clicks AI button
2. Panel opens instantly
3. Show meaningful placeholder or default state:
   • Empty state
   • Suggestions
   • Context-aware hints
4. Only show loading when:
   • User triggers AI action (Ask / Explain / Fix SQL)
   • OR actual request is in-flight

---

Proposed Solution

1. Replace Initial Loading State

Instead of:

if (loading) return <Spinner />

Use:

if (!hasStartedRequest) {
  return <EmptyState />
}

---

2. Introduce Explicit State Machine

type AIState =
  | 'idle'        // panel just opened
  | 'ready'       // context available
  | 'loading'     // user triggered AI
  | 'success'
  | 'error'

---

3. Empty State Design

When state = idle:

• Show helpful UI instead of spinner:

Examples:

• "Ask anything about your data"
• "Explain this query"
• "Generate SQL from natural language"

Optional:

• Suggested prompts
• Recently used actions
• Context-aware hints (if table selected)

---

4. Loading Should Be Action-Driven

Only show spinner when:

• User clicks:

  • Ask AI
  • Explain SQL
  • Optimize query

NOT when:

• Panel opens
• No request has started

---

5. Optional: Skeleton Instead of Spinner

If needed:

• Use lightweight skeleton instead of blocking spinner
• Avoid full-screen loading states

---

UX Principle

“Opening a panel should never feel like a network request.”

AI panel is a tool surface, not a data fetch page.

---

Acceptance Criteria

• Opening AI panel shows instant UI (no spinner)
• Spinner only appears after user triggers AI request
• Empty state provides clear guidance
• No perceived delay when opening panel

---

Future Enhancements

• Cache last AI session and show immediately
• Preload lightweight context in background
• Add "instant suggestions" based on current editor content
• Streaming response (progressive rendering)

---

Notes

This change is small but high-impact:

• Improves perceived performance significantly
• Makes Dory feel more "AI-native"
• Aligns with modern UX patterns (Notion AI, Cursor, etc.)