Skeleton

초기 콘텐츠 로딩에 사용 (user-triggered 액션은 Spinner).

Note: ShimmeringText / CyclingShimmeringText는 Skeleton의 variant가 아닌 AIStreamingText 도메인 primitive입니다. AI 응답 렌더링 전용.

Mobile

순수 시각 placeholder — 플랫폼 분기 없음. Web 명세 그대로 mobile에 적용. shimmer 애니메이션 구현은 RN에서 react-native-reanimated 등으로 동등하게 재현.

Preview

Variants

• text — 한 줄 텍스트 placeholder
• document — 문서/노트 본문 로딩. 섹션 간격과 여러 라인을 사용
• block — 카드나 패널 내부의 넓은 영역 placeholder
• list — 리스트 아이템. 실제 row 구조에 맞춰 여러 라인을 사용
• custom — className으로 치수 지정

States

active · hidden (로딩 완료 시 실제 콘텐츠로 자연 전환)

Sizes

Size prop 미지원. Skeleton은 placeholder geometry 직접 지정. size prop 없음

Token Mapping

Usage

<Skeleton variant="block" className="h-32 w-full" />

<div className="flex flex-col">
  <Skeleton variant="text" className="h-3 w-1/2" />
  <Skeleton variant="text" className="mt-2 h-3 w-2/5" />
  <Skeleton variant="text" className="mt-7 h-3 w-1/3" />
  <Skeleton variant="text" className="mt-2 h-3 w-2/3" />
  <Skeleton variant="text" className="mt-2 h-3 w-5/6" />
</div>

A11y

• prefers-reduced-motion 시 pulse 애니메이션 비활성화
• 로딩 완료 시 focus jump 방지

Do / Don't

• Do: 실제 레이아웃과 동일한 치수/radius로 skeleton 생성
• Do: 초기 콘텐츠 로딩에만 사용
• Don't: 레이아웃과 무관한 형태의 skeleton 금지
• Don't: user-triggered 액션 로딩에 사용 금지 → Spinner