Skeleton

Purpose

Skeleton components provide animated placeholders while content is loading:

• Base Skeleton for custom shapes
• Pre-built variants for common patterns
• Consistent pulse animation

When to use

Use Skeleton for:

• Loading states in lists and tables
• Placeholder content during data fetching
• Improving perceived performance

Basic usage

Base Skeleton

import { Skeleton } from '@/shared/ui/components/Skeleton'

// Custom shape
<Skeleton className="h-12 w-12 rounded-full" />  // Avatar
<Skeleton className="h-4 w-[200px]" />           // Text line
<Skeleton className="h-32 w-full" />             // Image

SkeletonText

Multiple lines of text placeholder.

import { SkeletonText } from '@/shared/ui/components/Skeleton'

<SkeletonText lines={3} />

SkeletonCard

Card-shaped skeleton with optional header/footer.

import { SkeletonCard } from '@/shared/ui/components/Skeleton'

<SkeletonCard showHeader showFooter />

SkeletonTable

Table skeleton with configurable rows and columns.

import { SkeletonTable } from '@/shared/ui/components/Skeleton'

<SkeletonTable rows={5} columns={4} showHeader />

SkeletonList

List of skeleton items.

import { SkeletonList } from '@/shared/ui/components/Skeleton'

<SkeletonList count={5} showAvatar />

Props

Skeleton

Prop	Type	Description
className	string	Shape and size classes
style	CSSProperties	Inline styles

SkeletonText

Prop	Type	Default	Description
lines	number	3	Number of lines
className	string	-	Container class

SkeletonCard

Prop	Type	Default	Description
showHeader	boolean	true	Show header skeleton
showFooter	boolean	false	Show footer skeleton
className	string	-	Container class

SkeletonTable

Prop	Type	Default	Description
rows	number	5	Number of rows
columns	number	4	Number of columns
showHeader	boolean	true	Show header row
className	string	-	Container class

SkeletonList

Prop	Type	Default	Description
count	number	3	Number of items
showAvatar	boolean	false	Show avatar placeholder
className	string	-	Container class

Notes

• Uses Tailwind's animate-pulse for consistent animation
• Compose base Skeleton for custom loading states
• Match skeleton dimensions to actual content for smooth transitions