Dynamic Loading Text

AI

Context-aware loading messages that cycle through relevant status updates during AI processing.

Variants

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

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

Usage

Basic 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}
/>