Dynamic Loading Text
AI
Context-aware loading messages that cycle through relevant status updates during AI processing.
Preview
Different display styles for various contexts
Default (with stage)
Analyzing your request
Processing data
Analyzing patterns
Compact
Generating response
Custom Messages
Analyzing task patterns...
Detailed (with progress)
Processing data
Stage: processing
Progress0%
Est. 30s remaining
Props
DynamicLoadingText component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stage | 'thinking' | 'processing' | 'analyzing' | 'generating' | 'finalizing' | — | Predefined loading stage |
variant | 'default' | 'compact' | 'detailed' | 'default' | Display style variant |
customMessages | string[] | — | Override with your own contextual status updates |
showProgress | boolean | false | Show animated progress bar (detailed variant) |
estimatedTime | number | — | Estimated seconds remaining for progress display |
className | string | — | Additional CSS classes |
Usage
Import and implementation example
import { DynamicLoadingText } from '@/components/ui/dynamic-loading-text'
// Using predefined stages<DynamicLoadingText stage="processing" />
// With custom messages<DynamicLoadingText customMessages={[ 'Analyzing data...', 'Processing...', 'Almost done...' ]}/>
// Detailed with progress<DynamicLoadingText variant="detailed" stage="analyzing" showProgress estimatedTime={30}/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Loading stages: Predefined stages: thinking, processing, analyzing, generating, finalizing
- Custom messages: Override with your own contextual status updates
- Three variants: Default, compact inline, and detailed with progress
- Progress bar: Optional progress display with estimated time
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
aria-live="polite" for cycling message updatesrole="status" on the containerKeyboard Navigation
| Key | Action |
|---|---|
| N/A | Component is display-only, no interaction |
Notes
- Cycling messages are announced to screen readers via aria-live
- Progress percentage communicated as text, not only visually