Loading

데이터 처리나 화면 전환 중 대기 상태를 사용자에게 전달해요. 둘 다 순수 CSS라 서버 컴포넌트(RSC)에서도 바로 쓸 수 있어요.

Skeleton

실제 콘텐츠 형태를 미리 보여줘 체감 대기 시간을 줄여요. 크기는 className 으로 지정해요.

조합 예시 (카드):

tsx

import { Skeleton } from '@openiot/ui'

<Skeleton className="h-4 w-40" />            {/* 텍스트 */}
<Skeleton className="h-24 w-40 rounded-lg" /> {/* 사각형 */}
<Skeleton className="size-16 rounded-full" /> {/* 원형 */}

Spinner

짧은 대기 상황에서 진행 중임을 단순하게 표시해요. role="status" + sr-only 라벨이 기본 포함돼요.

tsx

import { Spinner } from '@openiot/ui'

<Spinner size="md" label="불러오는 중" />

버튼 내부 로딩은 <Button loading> 을 사용하세요. 브랜드 Lottie 변형 (Symbol·Linear)은 Lottie 자산 연동 후 추가 예정.