danilowoz/react-content-loader

개요 SVG 기반으로 스켈레톤 로딩 UI를 쉽게 만드는 React 컴포넌트다. 14,000+ stars를 보유한 라이브러리로 Facebook 카드 스타일의 로딩 플레이스홀더를 간단하게 구현할 수 있다.

핵심 내용 SVG를 사용해 커스텀 스켈레톤 모양을 정의하고, 물결 애니메이션 효과를 자동으로 적용한다. 텍스트, 이미지, 코드 블록 등 다양한 프리셋을 제공하며, React Native도 지원한다. 온라인 에디터(skeletonreact.com)로 스켈레톤을 시각적으로 디자인할 수 있다.

기존 대비 차별점 CSS 기반 스켈레톤은 정확한 레이아웃 재현이 어렵다. SVG 기반이라 실제 콘텐츠 레이아웃을 픽셀 단위로 재현한 스켈레톤을 만들 수 있어 콘텐츠 로드 후 레이아웃 변화(CLS)를 최소화한다.

활용 가능성 데이터 로딩 중 사용자 경험 개선, 피드·카드·프로필 등 콘텐츠 플레이스홀더, 퍼포먼스가 중요한 웹/앱 인터페이스에서 로딩 상태 UX 향상에 활용할 수 있다.

참고 자료 - 원본