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.
High because the first-token latency window is long enough that a frozen UI causes duplicate submits and session abandonment.
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>
ID: ai-chat-visibility.loading-and-streaming.typing-indicator
Severity: high
What to look for: Check the chat component for loading state handling. Enumerate all loading-related state variables: isLoading, isGenerating, isPending, status === 'streaming', or similar. For each, check whether a visible typing indicator, spinner, animated dots, skeleton message, or other affordance is rendered conditionally. Quote the actual JSX conditional if found (e.g., quote the {isLoading && <TypingIndicator />} pattern). The indicator should appear immediately after submit and disappear when the response completes.
Pass criteria: A visible UI element appears between the user submitting a message and the first token of the AI response arriving. The indicator is distinct from the message content and clearly communicates that the AI is working. At least 1 loading state variable must be connected to a visible UI indicator.
Fail criteria: After submitting a message, no visual feedback is shown until the full response (or first chunk) appears. The UI appears frozen or unresponsive during generation.
Skip (N/A) when: No AI chat interface is detected. Signal: same as response-streaming-progressive.
Detail on fail: "No loading indicator found — isLoading state exists but renders no UI element; users see a frozen interface after submit"
Remediation: Add a typing indicator rendered conditional on the loading/generating state. Even three animated dots is better than silence — it reassures users their request was received and the system is working.
For accessibility, add role="status" and aria-label to the indicator in src/components/chat/TypingIndicator.tsx:
<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>
Cross-reference: For a deeper analysis of accessible loading states and ARIA live regions, the Accessibility Fundamentals Audit covers this in detail.