Skeleton

Use Skeleton when you need to indicate that content is loading, providing users with visual feedback while data is being fetched or processed. This improves perceived performance and user experience.

The component is ideal for data-heavy applications, dashboards, profile pages, product listings, and any scenario where content takes time to load. It helps maintain layout stability and reduces the jarring effect of content suddenly appearing.

• Match the skeleton shape and size to the actual content that will appear, maintaining the same layout structure.
• Use the pulse variant for general loading states as it's subtle and widely recognized.
• Choose shimmer variant for premium interfaces or when you want to create a more polished, sophisticated loading experience.
• Display skeletons for at least 300-500ms to prevent flashing if content loads very quickly.
• Group multiple skeletons to represent complex layouts like cards, tables, or forms.
• Avoid overusing skeletons; only show them for content that takes noticeable time to load (typically >200ms).

The Skeleton component is primarily visual and should be used alongside proper ARIA attributes to communicate loading states to assistive technologies.

Consider wrapping skeleton content with aria-busy="true" and aria-label="Loading content" on the parent container. When content loads, ensure focus management is handled appropriately for screen reader users.

The animations (pulse and shimmer) use prefers-reduced-motion media query automatically through Tailwind, respecting user preferences for reduced motion.