Get Started- Complete documentation overview

Simple animated typing indicator for AI responses.

Overview

The TypingIndicator component provides:

  • Clean animated dots (no text)
  • Minimal design
  • Automatic animation delays
  • Theme-aware colors

Basic Usage

import TypingIndicator from "@/components/ai/TypingIndicator";

export default function ChatPage() {
  const [isTyping, setIsTyping] = useState(false);

  return (
    <div>
      {isTyping && <TypingIndicator />}
    </div>
  );
}

Component Details

The component is intentionally simple - just three animated dots with staggered delays:

<TypingIndicator />
// Shows: ● ● ● (animated bouncing dots)

Props

The component has no props - it's a simple, reusable indicator.

// No props needed
<TypingIndicator />

Styling

The component uses:

  • bg-primary - Theme primary color for dots
  • animate-bounce - Tailwind bounce animation
  • Staggered delays (0.2s, 0.4s) for wave effect

Integration Examples

In Chat Interface

import ChatInterface from "@/components/ai/ChatInterface";
import TypingIndicator from "@/components/ai/TypingIndicator";

export default function ChatPage() {
  const [isTyping, setIsTyping] = useState(false);

  return (
    <div>
      {messages.map((msg) => (
        <ChatMessage key={msg.id} {...msg} />
      ))}
      
      {isTyping && <TypingIndicator />}
    </div>
  );
}

With ChatInterface Component

The ChatInterface component automatically uses TypingIndicator:

<ChatInterface
  messages={messages}
  isTyping={isTyping}  // Automatically shows TypingIndicator
  onSendMessage={handleSend}
/>

During Streaming

{isStreaming && (
  <div className="flex justify-start">
    <TypingIndicator />
  </div>
)}

Customization

Custom Colors

To change colors, modify the component or use CSS:

// In TypingIndicator.tsx, change:
className="w-2 h-2 bg-primary rounded-full"
// To:
className="w-2 h-2 bg-accent rounded-full"

Custom Size

Modify the dot size:

// Change w-2 h-2 to w-3 h-3 for larger dots
className="w-3 h-3 bg-primary rounded-full"

Best Practices

  1. Show during wait - Display while AI is processing
  2. Hide when done - Remove when response arrives
  3. Keep simple - Component is intentionally minimal
  4. Use with ChatInterface - Automatically integrated

Accessibility

The component is minimal and doesn't interfere with screen readers. For better accessibility, you can wrap it:

<div role="status" aria-label="AI is typing">
  <TypingIndicator />
</div>

Performance

  • Lightweight - Pure CSS animations
  • GPU accelerated - Uses Tailwind animations
  • No JavaScript - No state or effects needed

Next Steps