SkeletonLoader

A loading placeholder that displays a shimmer or pulse animation while content is being fetched, providing a professional user experience for data retrieved 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 of skeleton shape. Type: string. Options: text, circle, rectangle, card. Default: rectangle.

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

Tip: 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

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

height

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

borderRadius

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

shimmer

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

pulse

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

count

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

gap

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

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