ui-skeleton

Skeleton placeholders are content-shaped elements that mirror final layouts during data loading. They reduce perceived waiting time by showing tangible shapes instead of generic spinners, preventing layout shifts before actual content arrives.

To implement skeleton loading, apply CardSkeleton and ListSkeleton components to cards, grids, and lists. Match the final content structure with subtle shimmer animations, then replace the skeleton progressively as data arrives.

Skeleton placeholders replace generic spinners by matching final content structure, which prevents layout shifts. They provide a non-distracting shimmer animation that serves as a loading cue while maintaining accessibility through color contrast and semantic roles.

Yes, you can apply skeleton placeholders to image-heavy layouts across web apps. The component-specific skeletons mirror the final content structure, ensuring no layout shifts occur while waiting for data fetches to complete.

To ensure accessibility with skeleton loading placeholders, maintain proper color contrast and semantic roles while loading. The subtle shimmer animation provides a non-distracting visual cue without compromising the semantic structure of the page.

Avoid using skeleton placeholders when final content structure is highly unpredictable or dynamic. Skeletons require matching the final layout closely; if content shape varies significantly, the placeholder mismatch can cause layout shifts and confuse users.