dvtng/react-loading-skeleton
React Loading Skeleton
react-loading-skeleton este o bibliotecă React pentru randarea formelor de tip placeholder care simulează stările de încărcare a conținutului. Oferă o colecție de componente UI tematice utilizate pentru a reprezenta interfețele de încărcare înainte ca datele să fie preluate și afișate.
Biblioteca dispune de un provider de teme ierarhic care permite gestionarea globală sau imbricată a culorilor și animațiilor. Include placeholder-e personalizabile care suportă diverse dimensiuni și forme, cum ar fi indicatori circulari pentru elementele de profil și forme de tip bloc pentru conținutul general.
Sistemul implementează standarde de accesibilitate prin maparea componentelor la atributele screen reader-elor și detectarea preferințelor de reducere a mișcării la nivel de sistem pentru a modifica animațiile. Utilizează efecte de tip shimmer bazate pe CSS și placeholder-e care moștenesc dimensiunile pentru a menține stabilitatea layout-ului.
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.
