Skeleton

콘텐츠가 로드되기 전 자리 표시 placeholder.

페이지 진입 시 layout shift를 줄이고 인지 속도를 빠르게. 로드될 컨텐츠의 모양과 비슷하게 배치.

import { Skeleton } from "@nxtgen-org/react";

Card placeholder

아바타 + 텍스트 라인

tsx

1<Card>
2  <div className="flex gap-3 mb-4">
3    <Skeleton rounded="full" className="size-10 shrink-0" />
4    <div className="flex-1 space-y-2">
5      <Skeleton className="h-4 w-1/3" />
6      <Skeleton className="h-3 w-1/2" />
7    </div>
8  </div>
9  <div className="space-y-2">
10    <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>	—	—