Skeleton
A customizable skeleton loader component for creating loading placeholders.
Introduction
The Skeleton
component is a versatile loading placeholder that provides a better user experience during data fetching or content loading. It supports custom shapes, sizes, animations, and can be combined in different ways to match your actual content’s layout.
Basic Examples
Always Show Skeleton
Customize Your Skeleton
Timed Skeleton with Content
Installation
Install the Skeleton component using:
File Structure
Prop Types
Prop | Type | Default |
---|---|---|
className | string | - |
otherProps | React.HTMLAttributes<HTMLDivElement> | - |
Common Use Cases
Card Layout
Create skeleton placeholders for a card component:
Table Row Loading
Create skeleton placeholders for table rows:
Profile Information
Create a skeleton for user profile information:
Custom Colored Skeletons
Customize the skeleton color to match your design:
Customization
The Skeleton component is designed to be easily customizable:
Styling with Tailwind
Custom Animation
You can override the default pulse animation:
Conditional Rendering with Loading State
Combining with a loading state in components:
Accessibility
When using skeletons, keep these accessibility considerations in mind:
- Purpose: Skeletons should provide visual cues about content structure during loading
- ARIA: For screen reader users, consider adding an aria-live region with loading status
- Timing: If the loading time is predictable, consider showing a timer or progress bar
Example with ARIA Support
Best Practices
For the most effective skeleton loading experience:
- Match Content Structure: Design skeletons to match the actual content’s layout and proportions
- Optimize Performance: Skeletons should be lightweight and not add rendering overhead
- Consistent Design: Maintain consistent styling between skeletons and actual content
- Sensible Timing: Only show skeletons for loads that take longer than ~300ms
- Avoid Layout Shifts: Ensure skeleton dimensions closely match the expected content dimensions
Conclusion
The Skeleton
component is a lightweight yet powerful tool for creating loading state placeholders in your UI. With its simple implementation and high customizability, you can create effective loading experiences that reduce perceived wait times and improve user satisfaction.