danilowoz/react-content-loader

React Content Loader is a small component for React that creates placeholder loading screens, the gray animated shapes a web page or app shows while its real content is still arriving. The README points to Facebook's loading cards as the familiar example. These placeholders are drawn with SVG, a format that describes images using shapes and math so they stay sharp at any size. React itself is a widely used tool for building user interfaces. The README highlights a few selling points. You can change the colors, animation speed, and sizes, and support right-to-left layouts. It comes with ready-made presets so you can drop one in without much effort, and there is a separate web tool called create-content-loader for designing your own shapes visually. The same component works in React Native, the version of React used to build mobile apps, with the same interface. For the web version the README notes it is very small, under two kilobytes, and has no other dependencies. You install it through the npm or yarn package managers, and the React Native setup needs one extra package for drawing SVG shapes. There are two ways to use it. You can import a preset, such as the Facebook layout, and place it in your page as is. Or you can build a custom loader by writing the SVG shapes yourself, like rectangles and circles, inside the component to match the shape of the content you are waiting on. The README links to a live example on CodeSandbox for people who want to see it working. The rest of the README documents the settings the component accepts. These include turning the animation on or off, setting the speed in seconds, choosing the background and foreground colors and their opacity, adjusting the size through a viewBox value, enabling right-to-left direction, and adding a title that describes the element. Each setting notes whether it applies to the web version, React Native, or both.