dvtng/react-loading-skeleton

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.

سجل النجوم