Loading
Skeleton
콘텐츠가 로드되기 전 자리 표시 placeholder.
페이지 진입 시 layout shift를 줄이고 인지 속도를 빠르게. 로드될 컨텐츠의 모양과 비슷하게 배치.
import { Skeleton } from "@nxtgen-org/react";
Card placeholder
아바타 + 텍스트 라인
tsx
<Card><div className="flex gap-3 mb-4"><Skeleton rounded="full" className="size-10 shrink-0" /><div className="flex-1 space-y-2"><Skeleton className="h-4 w-1/3" /><Skeleton className="h-3 w-1/2" /></div></div><div className="space-y-2"><Skeleton className="h-3 w-full" />
API
| Name | Type | Default | Description |
|---|---|---|---|
| rounded | "sm" | "md" | "lg" | "full" | "md" | — |
| className | string | — | h-/w-/size- 등 사이즈 지정. |
| ...props | HTMLAttributes<HTMLDivElement> | — | — |