dvtng/react-loading-skeleton
React Loading Skeleton
react-loading-skeleton is a React library for rendering placeholder shapes that simulate content loading states. It provides a collection of themed UI components used to represent loading interfaces before data is fetched and displayed.
The library features a hierarchical theme provider that allows for the global or nested management of colors and animations. It includes customizable placeholders that support various dimensions and shapes, such as circular indicators for profile elements and block-level shapes for general content.
The system implements accessibility standards by mapping components to screen reader attributes and detecting system-level reduced-motion preferences to modify animations. It utilizes CSS-driven shimmer effects and dimension-inheriting placeholders to maintain layout stability.
Features
- Loading Skeletons - Provides placeholder skeleton screens to indicate content is loading and reduce perceived wait times.
- Skeleton Placeholders - Provides a comprehensive set of customizable placeholder shapes and containers to simulate content loading states.
- Shimmer Effects - Employs CSS keyframe animations to create a moving gradient shimmer effect that simulates content loading.
- Layout Configurations - Implements controls for adjusting placeholder counts, circular shapes, and block or inline display modes.
- Context-Based Theme Injection - Uses a React context provider to broadcast theme configuration and design tokens to all nested skeleton components.
- Layout Placeholders - Generates adaptable placeholder shapes and lines that mimic the structure of content before data arrives.
- Loading Indicators - Provides customizable visual elements that represent loading states while honoring accessibility preferences and screen reader needs.
- Themed Component Libraries - Ships a collection of themed placeholders with a hierarchical provider for consistent global or nested styling.
- React Component Styling - Builds visually consistent loading indicators that inherit the layout and styles of the surrounding React application.
- Theme Providers - Implements a hierarchical provider that manages and propagates theme colors to all nested loading placeholders.
- Loading Placeholders - Provides a set of customizable visual placeholder components used to indicate loading states while data is being fetched.
- Accessibility Motion Controls - Detects system-level reduced-motion preferences to automatically disable or modify shimmer animations for accessibility.
- Skeleton - Provides a mechanism to adjust colors, animations, and layout directions via theme settings to match application designs.
- Accessible - Provides loading indicators that respect reduced-motion settings and include ARIA attributes for screen reader accessibility.
- Adaptive Loading Skeletons - Generates placeholder shapes that inherit dimensions and layout styles from surrounding content to maintain stability.
- Circular Placeholder Rendering - Renders loading indicators as circles to represent profile pictures or other round user interface elements.
- Dimension-Inheriting Placeholders - Calculates placeholder sizes based on the parent container or inline styles to maintain layout stability during loading.
- Placeholder Styling - Allows customization of colors, animation speed, dimensions, and border radius for individual placeholders or globally.
- Web Accessibility Implementations - Ensures loading placeholders are accessible to screen readers and respect system settings for reduced motion.
- Accessibility Attribute Mapping - Implements dynamic mapping of component props to ARIA attributes to notify screen readers of loading states.
