Skeleton Component

Overview

Skeleton shows placeholder shapes that match the content on its way, so users see the layout before the data arrives. When loading finishes, placeholders exit first and the real content fades, rises, or scales in, so the two states never overlap.

Use it when a section’s layout is known but its content isn’t ready yet, such as product cards, dashboards, profiles, and feeds. It should never make users wait longer than the real load.

Theme and Interaction Customisation

Set placeholder roundness and group-level animation so loading shapes match the interface. Shimmer timing, stagger, the reveal mode (fade, rise, scale, or instant), entrance duration, and delay between loaded items can each be tuned separately.

Example Production Use Case

A SaaS dashboard can show metric and activity placeholders while data loads, then fade in the real cards in the same positions so nothing jumps.

An ecommerce listing can reserve space for product images, names, and prices, with a gentle staggered shimmer across the grid until inventory arrives.

A social or news feed can use rise-in reveals for each loaded post, keeping scrolling stable while the next batch is fetched.

Best Used For

• SaaS dashboards with metrics and summaries.
• Product listings.
• Profile and account pages.
• Content and activity feeds.
• Data-driven cards.
• Project management tools.
• Ecommerce product details and recommendations.

Not For

Skip it for operations that finish almost instantly, where placeholders just add flicker.

If the incoming content’s shape is unknown, placeholders mislead and cause layout shifts. Form submissions and background actions suit a button state or progress message better.

It never replaces error handling, so failed loads need a clear error or retry state.

Performance Budget

Keep shimmer lightweight with subtle stagger across large sets, start reveals as soon as content is ready, and keep entrances short. Skip skeletons entirely for cached or instantly available content.

Accessibility and Mobile

Hide decorative placeholders from assistive technology and expose one loading status for the region, updating it once when content arrives. On mobile, size placeholders to the responsive layout and avoid overflow, and with reduced motion use static placeholders and an instant swap.

Common Mistakes

• Placeholders that don’t match the real content.
• Overlapping loading and loaded states.
• Keeping skeletons up after content is ready.
• Too many independent shimmer effects.
• Showing skeletons instead of an error when loading fails.
• Replacing cached content with placeholders on background refresh.
• Causing layout shifts at reveal.
• Ignoring reduced-motion preferences.