TypingIndicator

typingindicator-1779388705621.tsx

'use client';
import { useState, useEffect } from 'react';

export default function TypingIndicator({ users = ["Alice", "Bob"] }) {
  const [visible, setVisible] = useState(true);
  const [dot, setDot] = useState(0);

  useEffect(() => {
    const d = setInterval(() => setDot(p => (p + 1) % 3), 500);
    return () => clearInterval(d);
  }, []);

  const label = users.length === 1 ? `${users[0]} is typing`
    : users.length === 2 ? `${users[0]} and ${users[1]} are typing`
    : `${users[0]} and ${users.length - 1} others are typing`;

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', display: 'flex', alignItems: 'center', gap: '10px' }}>
      <div style={{
        background: 'rgba(255,255,255,0.07)',
        borderRadius: '18px 18px 18px 4px',
        padding: '10px 16px',
        display: 'inline-flex',
        alignItems: 'center',
        gap: '5px',
      }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{
            width: '7px', height: '7px',
            borderRadius: '50%',
            background: dot === i ? '#C9A84C' : 'rgba(245,245,240,0.3)',
            transform: dot === i ? 'scale(1.3)' : 'scale(1)',
            transition: 'all 0.3s ease',
          }} />
        ))}
      </div>
      <span style={{ color: 'rgba(245,245,240,0.45)', fontSize: '12px' }}>{label}</span>
    </div>
  );
}

Component info

CategoryCommunication

Frameworkreact

TierFREE

Copies0

About

Animated typing indicator for chat interfaces

More from Communication

'use client'
import { useState } from 'react'

const PARTICIPANTS = [
  { id: 1, name: 'You', initials: 'ME', color: '#C9A84C', muted: false, camera: true, speaking: true },
  { id: 2, name: 'Sarah Chen', initials: 'SC', color: '#6366f1', muted: fals

VideoCallUI

Communication

'use client';
import { useState } from 'react';

export default function EmailComposer() {
  const [to, setTo] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [sent, setSent] = useState(fa

EmailComposer

Communication

'use client';
import { useState } from 'react';

export default function ChatBubble() {
  const [messages, setMessages] = useState([
    { id: 1, text: 'Hey! The new design looks amazing 🔥', self: false, time: '09:41', reactions: { '👍': 2, '🔥': 1

ChatBubble

Communication