TypingIndicator
먼저 보고, 그다음 계약을 읽습니다
AI 응답 생성 중을 나타내는 3-dot wave 애니메이션 인디케이터.
Component intent의도와 경계 읽기
LLM 이 다음 토큰을 생성하기 직전 "사고 중" 단계를 표현하는 점 깜박이(wave)다. generic 로딩을 뜻하는 Spinner 와 달리 채팅 흐름의 "타이핑 중" 정서를 전담하며, AgentExecutor 의 스트리밍 cursor 와 보완 관계(cursor 는 텍스트 스트리밍 중, TypingIndicator 는 텍스트 시작 전)에 있다. MessageBubble assistant 안의 children 으로 넣거나 메시지 목록 마지막 자리에 단독으로 띄운다. role="status" + aria-live="polite" 로 스크린리더가 label 을 발화하고, prefers-reduced-motion 에서는 애니메이션이 멈춘 정적 점으로 낮춰진다.
예제
SSOT에 등록된 실제 API 기준 snippet입니다. standalone 배지만 독립 실행 단위이며, fragment는 주변 state·handler 문맥을 생략합니다.
import { TypingIndicator } from "@axe/ui";<TypingIndicator />import { MessageBubble, TypingIndicator } from "@axe/ui";<MessageBubble role="assistant"> <TypingIndicator size="lg" dot={4} label="답변 작성 중" /></MessageBubble><span class="axe-typing-indicator axe-typing-indicator--md" role="status" aria-live="polite" aria-label="AI 생각 중"> <span class="axe-typing-indicator__dot" style="animation-delay:0ms" aria-hidden="true"></span> <span class="axe-typing-indicator__dot" style="animation-delay:150ms" aria-hidden="true"></span> <span class="axe-typing-indicator__dot" style="animation-delay:300ms" aria-hidden="true"></span> <span class="axe-sr-only">AI 생각 중</span></span>Props
TSX 소스가 진실입니다. 주요 export 컴포넌트의 public API만 노출합니다.
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
label | string | — | "AI 생각 중" | aria-label 겸 sr-only 텍스트 — 스크린리더가 읽는 상태 문구. |
size | "sm" | "md" | "lg" | — | "md" | 점 크기·간격 프리셋(sm 5px / md 7px / lg 10px). |
dot | 3 | 4 | 5 | — | 3 | 렌더할 점 개수. |
...rest | React.HTMLAttributes<HTMLSpanElement> | — | — | className 은 루트와 병합, 나머지는 루트 <span> 으로 전파. |
.axe-* 클래스 계약
React 밖에서도 같은 표면을 그리는 공개 계약입니다. stable은 minor 버전 안에서 이름을 바꾸지 않습니다.
| 클래스 | 안정성 | 용도 |
|---|---|---|
.axe-typing-indicator | stable | 루트 <span>(inline-flex, 점들을 가로 정렬). |
.axe-typing-indicator--sm | stable | sm 크기 변형(--axe-typing-dot: 5px, 좁은 간격/패딩). |
.axe-typing-indicator--md | stable | md 크기 변형(--axe-typing-dot: 7px, 기본). |
.axe-typing-indicator--lg | stable | lg 크기 변형(--axe-typing-dot: 10px, 넓은 간격/패딩). |
.axe-typing-indicator__dot | stable | 각 점 — axe-typing-wave 1.2s 무한 애니메이션(개별 animation-delay 는 인라인 style 로 부여). |
접근성
키보드, ARIA, 구현 노트를 함께 검토합니다.
role="status" + aria-live="polite" + aria-label(label). 점들은 각각 aria-hidden 이고, 안에 별도 sr-only <span> 이 label 을 담아 시각 점과 무관하게 스크린리더가 상태를 발화한다.
sr-only 텍스트는 공유 유틸 클래스 .axe-sr-only(indicators.css)로 시각적으로 숨긴다 — TypingIndicator 가 소유한 클래스는 아니다. prefers-reduced-motion: reduce 에서는 점 애니메이션이 none 으로 꺼지고 opacity 0.5 정적 상태가 된다. 키보드 상호작용 없음.