Skeleton Component Showcase

Introduction

The Skeleton component provides placeholder content while the actual content is loading. Below are examples showcasing different skeleton types, including customizable options.

Usage Examples

Text Skeleton


import Skeleton from '../../components/skeleton'; 

const TextSkeleton: React.FC = () => (
  <Skeleton variant="text" width="80%" height="1.5rem" />
);

export default TextSkeleton;

Card Skeleton


import Skeleton from '../../components/skeleton'; 

const CardSkeleton: React.FC = () => (
  <Skeleton variant="card" width="100%" height="200px" />
);

export default CardSkeleton;

Image Skeleton


import Skeleton from '../../components/skeleton'; 

const ImageSkeleton: React.FC = () => (
  <Skeleton variant="image" width="100%" height="150px" />
);

export default ImageSkeleton;

Spinner Skeleton


import Skeleton from '../../components/skeleton'; 

const SpinnerSkeleton: React.FC = () => (
  <Skeleton variant="spinner" color="#FF5733" width="60px" height="60px" />
);

export default SpinnerSkeleton;