스켈레톤

스켈레톤

스켈레톤은 콘텐츠가 로딩되는 동안 그 자리를 대신 채워주는 자리표시자(placeholder) 컴포넌트예요. 데이터가 아직 도착하지 않아 화면이 텅 비어 보이는 대신, 실제 콘텐츠와 비슷한 모양의 회색 블록이 반짝이며 로딩 중임을 알려줘요. 사용자가 "지금 로딩 중이구나"를 바로 인지할 수 있어서 화면이 갑자기 바뀌는 충격을 부드럽게 줄여준답니다.

출처: 문서

본문

설치하기

init 명령으로 프로젝트를 초기화했다면, 다음 명령어로 스켈레톤 컴포넌트를 바로 추가할 수 있어요.

CLI Manual 
npx shadcn@latest add skeleton

다음 코드를 프로젝트에 복사해서 붙여넣어 주세요.

import 경로를 프로젝트 설정에 맞게 바꿔 주세요.

사용하기

스켈레톤 컴포넌트를 import 한 뒤, 로딩 상태를 보여줄 자리에 원하는 크기와 모양으로 배치하면 돼요.

import { Skeleton } from "@/components/ui/skeleton"

<Skeleton className="w-[100px] h-[20px] rounded-full" />

예시

카드

로딩 상태를 보여주는 카드 스켈레톤 예시가 준비되어 있어요.

더 알아보기 (Learn more)