danilowoz/react-content-loader

Features

• Skeleton Loaders - Provides a system for rendering SVG placeholder shapes to indicate that content is currently loading.
• Hydration Key Mappings - Assigns hardcoded keys to SVG gradient definitions to prevent ID mismatches during client-server hydration.
• SVG-Based Vector Rendering - Utilizes scalable vector graphics to render placeholder geometries that remain proportional across screen sizes.
• React Components - Ships reusable loading indicator components specifically designed for the React ecosystem.
• Loading Skeletons - Creates SVG placeholders that mimic the layout of loading content to improve perceived performance.
• Client-Side Hydration - Ensures consistent loading animations between server-side and client-side rendering using static SVG keys.
• Server-Side Rendering Utilities - Prevents hydration mismatches in React apps by using stable keys for SVG elements rendered on the server.
• Hydration Mechanisms - Implements a mechanism using static keys to prevent SVG hydration mismatches between server and client.
• Geometry Presets - Provides predefined layout configurations that map to specific SVG coordinates for rapid skeleton generation.
• Design Tools - Includes a dedicated tool for building bespoke skeleton shapes that match specific interface layouts.
• Loading Screen Customizers - Provides controls for adjusting placeholder colors, animation speeds, and layout directions.
• Placeholder Generators - Ships a tool for building custom SVG shapes to match specific layout geometries for skeleton animations.
• CSS Animation Patterns - Implements a moving highlight effect using pure CSS keyframe animations for skeleton shimmer.
• Loaders and Progress - SVG-based placeholder loading components.

Star history