Skeleton

Content placeholders for optimistic loading states. Skeletons reduce perceived wait times by outlining content structure.

Usage

Use Skeletons during initial page loads or when refreshing content sections. Match the skeleton shapes to the actual component anatomy to minimize layout shift.

Content

Profile Card Loading

Simulating the loading state of a user profile.

Spec

Background: #F8F8F8 (Neutral Muted).
Border: 1px solid #E5E5E5 (Optional, for structure).
Animation: Subtle 2s pulse (animate-pulse).
Radius: Flexible (rounded-md, rounded-full, etc.) to match Target.

Anatomy

PULSING RECTANGLE