A visible loading indicator appears while the AI is generating

Between message submit and the first streamed token there is typically a one-to-three-second first-token latency, and with no loading indicator the UI appears frozen. Users commonly click send again, refresh the page, or abandon the session entirely, each of which either wastes tokens or loses the user. A visible typing indicator also serves an accessibility role via role="status" announcements, satisfying WCAG 2.2 SC 4.1.3 (Status Messages) for screen reader users.

Render a conditional typing indicator tied to your loading state inside src/components/chat/TypingIndicator.tsx, and expose it to assistive tech with role="status" and a descriptive aria-label. Three animated dots are sufficient; silence is not.

<div role="status" aria-label="AI is generating a response">
  <span className="animate-bounce">●</span>
  <span className="animate-bounce delay-100">●</span>
  <span className="animate-bounce delay-200">●</span>
</div>