|Project Name||Stars||Downloads||Repos Using This||Packages Using This||Most Recent Commit||Total Releases||Latest Release||Open Issues||License||Language|
|:hourglass_flowing_sand: A higher order component for loading components with promises.|
|React Content Loader||12,768||309||249||10 days ago||69||March 09, 2022||9||mit||TypeScript|
|⚪ SVG-Powered component to easily create skeleton loadings.|
|Tweak React components in real time. (Deprecated: use Fast Refresh instead.)|
|Svgr||9,477||90,870||4,832||8 days ago||43||July 22, 2022||45||mit||TypeScript|
|Transform SVGs into React components 🦁|
|Deliver experiences best suited to a user's device and network constraints|
|React Loading Skeleton||3,248||66||107||5 days ago||25||April 11, 2022||1||mit||TypeScript|
|Create skeleton screens that automatically adapt to your app!|
|A set of React components implementing flexboxgrid with the power of CSS Modules.|
|Seedstars Labs Base Django React Redux Project|
|React Spinners||2,529||1,045||415||7 days ago||145||July 30, 2022||6||mit||TypeScript|
|A collection of loading spinner components for react|
|React Infinite Scroll Component||2,232||243||200||3 months ago||42||April 20, 2021||163||mit||TypeScript|
|An awesome Infinite Scroll component in react.|
Also known as code splitting, dynamic import (TC39 proposal), "chunks" (which are loaded on demand), "layers", "rollups", or "fragments".
Async component (in React) is a technique (typically implemented as a Higher Order Component) for loading components with dynamic
See also: Redux modules and code-splitting, lazy loading guidance
Routes to chunks- separate into "chunks" based on routes, possible to do automatically. Example:
Components to chunks- separate components as "chunks". Example:
components to chunks): show
spinnerif content not loaded, but do not start spinner earlier then 200ms
routes to chunks): do not show spinner in the center of your page between the content switch, use progress line in the top, like YouTube does. Example: PACE.
routes to chunks): you can preload chunk (e.g. next page) on link hover
components to chunks): make sure you wait till all components loaded in case of prerendered pages (
components to chunks): some components can be skipped in case of
SSR, for example, Mapbox map
Component placeholder, also called
skeleton screens. Use react-content-loader, react-loading-skeleton
Spinner. Use CSS3, like spinkit, loaders, css-loaders
Lazy load- load images only when they appear on the screen. Use Intersection Observer API or react-waypoint
Load on demand. Useful for slow networks or big files, like video or gif.
load on demand): Use download ⬇️ icon for images and play ▶️ icon for animations.
Constant placeholder- do not use it
Solid coloror dominant color - fastest and simplest placeholders. Use color-thief to get color info. Used by Twitter, Google, Pinterest
LQIPor Low Quality Image Placeholder or Progressive image loading or "Blur-up" - better for perceptual speed than dominant color, but also have a bigger weight. Use lqip or sqip. Used by Facebook and Medium.
SVG traced images. There is plugin for Gatsby.
Fit to column width, preserves ratio. Easy for images, for other media use something like responsive-embed
Fit to vertical grid, preserves ratio. Example: Gutenberg
Intelligent cropping(doesn't preserve ratio) - crop to required size taking into account focal point. Example: focal-point, focal point intelligent cropping.
Choose size based on viewport, can change or preserve ratio. Examples:
Choose type of media based on viewportor capabilities, can change or preserve ratio. Example: Foundation interchange,
Go is the perfect fit for this kind of task. AWS Lambda now supports Go. Also you can use Go with Google Cloud functions.
A special case of async components. Example: