Feedback
Skeleton
World-class loading placeholders that show animated wireframes while content loads. Essential for healthcare applications where data loading states must be clearly communicated without causing user anxiety.
Animation Styles
Wave animation is perceived as faster than pulse. Use wave for most cases, pulse for subtle background loading.
Wave (default, faster perceived loading)
Pulse (classic, subtle)
None (static placeholder)
Basic Variants
Use the appropriate variant to match the content being loaded.
Avatar
Circle
Button
Text (3 lines)
Image
Composite Skeletons
Pre-built composite skeletons for common healthcare UI patterns. These match actual content layouts for better perceived performance.
Patient Card
Stat Card
Table Rows
Use table-row variant with count prop to show loading data tables.
Lab Results
List Items
Use list-item variant for loading patient lists, appointment lists, etc.
Recent Patients
Sizes
Size presets ensure consistency across your application.
Avatar Sizes
xs
sm
md
lg
xl
Button Sizes
xs
sm
md
lg
xl
Text Sizes
Loading vs Loaded State
Toggle between skeleton and loaded content to see the transition.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'rectangle' | 'circle' | 'text' | 'avatar' | 'button' | 'card' | 'image' | 'table-row' | 'patient-card' | 'stat-card' | 'list-item' | 'rectangle' | Visual variant of the skeleton |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size preset (for avatar, button, text variants) |
width | string | — | Custom width (CSS value) |
height | string | — | Custom height (CSS value) |
lines | number | 1 | Number of lines (for text variant) |
count | number | 1 | Number of items (for table-row, list-item variants) |
animation | 'wave' | 'pulse' | 'none' | 'wave' | Animation style - wave is perceived as faster |
rounded | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full' | string | 'md' | Border radius |
label | string | 'Loading content' | Accessible label for screen readers |
Healthcare Best Practices
- Match Layout: Use skeleton shapes that match actual content (patient-card for patients, table-row for tables) for better perceived performance.
- Wave Animation: Research shows wave/shimmer animation is perceived as faster than pulse - use it for primary loading states.
- Meaningful Labels: Provide specific
labelprops for screen readers (e.g., "Loading patient records" not just "Loading"). - Replace Promptly: Replace skeletons with actual content immediately when data arrives - never leave skeletons visible indefinitely.
- Error Handling: If loading fails, replace skeleton with an EmptyState error variant, not a stuck skeleton.
Accessibility Notes
- ARIA Status: Uses
role="status"witharia-busy="true"to indicate loading. - Screen Reader Text: Hidden text provides context without over-announcing.
- Reduced Motion: Animation is disabled for users with
prefers-reduced-motionpreference. - Visual Only: Decorative skeleton elements use
aria-hidden="true".