SkeletonLoader

A loading placeholder that displays a shimmer or pulse animation while content loads, providing a professional UX for data fetched from APIs or databases.

Use Cases

• Loading states in DataCardGrid while fetching data
• Image placeholders while images load
• Form submission feedback (processing state)
• Page section placeholders during initial load
• Card content loading in grids

Properties

variant

Type: string. Options: text, circle, rectangle, card. Default: rectangle. Type of skeleton shape.

Visual impact: Thin horizontal line (16px height) – use for text content loading; Circular shape – use for avatar/profile image loading; Rectangular block – use for image/media loading; Full card placeholder with image area + text lines – use for Card component loading.

Recommendations: Use ‘text’ with count=3‑5 for paragraph loading; Use ‘circle’ with width='48px' for avatar loading; Use ‘rectangle’ with height='200px' for image loading; Use ‘card’ when loading Card components in a grid.

width

Type: string. Default: 100%. Width of skeleton (any CSS value). For circle variant, this sets both width and height.

height

Type: string. Default: 20px. Height of skeleton (any CSS value). Ignored for circle variant.

borderRadius

Type: number. Default: 4. Border radius in pixels. Ignored for circle variant (always 50%).

shimmer

Type: boolean. Default: true. Enable shimmer effect (animated gradient sweep). Best for data fetching states.

pulse

Type: boolean. Default: false. Enable pulse effect (opacity animation). Best for processing/calculating states.

count

Type: number. Default: 1. Number of skeleton elements to render. Use count=3‑5 for text paragraphs.

gap

Type: number. Default: 8. Gap between multiple skeletons when count > 1.

Best Practices

• Use shimmer=true for network requests (data fetching from API/database)
• Use pulse=true for processing states (form submission, calculations)
• Match skeleton dimensions to actual content that will replace it
• Use variant='card' when loading Card components
• Use variant='text' with count=3 for paragraph loading
• Use variant='circle' for avatar/profile image loading
• Always provide loading skeletons when fetching data – never show blank space

Common Mistakes

Not showing loading state while fetching data

Why it's a problem: Blank space during loading feels broken and unprofessional

Fix: Always use SkeletonLoader when fetching data from API/database

Using both shimmer and pulse together

Why it's a problem: Competing animations look chaotic and unprofessional

Fix: Use shimmer=true for fetching OR pulse=true for processing, not both

Skeleton dimensions don’t match actual content

Why it's a problem: Layout shift when content loads looks jarring

Fix: Match skeleton width/height to the content that will replace it

Using rectangle for Card loading

Why it's a problem: Simple rectangle doesn’t represent card structure (image + text)

Fix: Use variant='card' for Card component loading – it has built-in structure