dvtng/react-loading-skeleton
React Loading Skeleton
react-loading-skeleton est une bibliothèque React pour le rendu de formes de remplacement simulant des états de chargement de contenu. Elle fournit une collection de composants UI thématisés utilisés pour représenter les interfaces de chargement avant que les données ne soient récupérées et affichées.
La bibliothèque dispose d'un fournisseur de thème hiérarchique qui permet la gestion globale ou imbriquée des couleurs et des animations. Elle inclut des espaces réservés personnalisables qui prennent en charge diverses dimensions et formes, telles que des indicateurs circulaires pour les éléments de profil et des formes de niveau bloc pour le contenu général.
Le système implémente les normes d'accessibilité en mappant les composants aux attributs des lecteurs d'écran et en détectant les préférences de réduction de mouvement au niveau du système pour modifier les animations. Il utilise des effets de scintillement pilotés par CSS et des espaces réservés héritant des dimensions pour maintenir la stabilité de la mise en page.
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.
