react-content-loader

React Content Loader renders animated placeholder loading states as pure SVG shapes clipped inside a single moving gradient mask, giving apps a lightweight skeleton-screen effect while content is still loading. Instead of a spinner, developers drop in shapes (rects, circles) or one of the built-in presets — Facebook, Instagram, Code, List, BulletList — and the library handles the shimmering gradient animation, RTL support, and accessible ARIA labeling automatically.

The same component API works across web (react-content-loader) and React Native (react-content-loader/native, backed by react-native-svg), so teams building cross-platform products can share loading-state markup. A companion no-code tool, create-content-loader, lets designers sketch a custom skeleton visually and export the matching JSX, which keeps the library approachable even for developers who don’t want to hand-write SVG coordinates.

What You Get

• A <ContentLoader> component that clips any SVG shapes you pass as children inside an animated linear-gradient mask
• Five ready-made presets — Facebook, Instagram, Code, List, BulletList — for common card/feed layouts with zero configuration
• A parallel React Native entry point (react-content-loader/native) exposing the same API and presets via react-native-svg primitives
• Configurable animation speed, colors, opacity, gradient ratio, and RTL mirroring via simple props
• The create-content-loader web tool for visually designing a custom loader and exporting its JSX

Common Use Cases

• Showing a Facebook/Instagram-style card skeleton while a social feed or profile page fetches data
• Replacing spinners with content-shaped placeholders on dashboards and list views to reduce perceived load time
• Building custom skeleton shapes for a specific layout using the online create-content-loader designer
• Sharing one skeleton-loading implementation between a React web app and its React Native counterpart

Under The Hood

Architecture The library is a thin, single-purpose component tree: ContentLoader dispatches to either the raw Svg renderer (when children are supplied) or the Facebook preset (when they aren’t), and every named preset (Facebook, Instagram, Code, List, BulletList) is simply ContentLoader pre-filled with a viewBox and a fixed set of <rect>/<circle> children. The actual visual effect lives in one file, Svg.tsx, which renders a <rect> clipped to the caller’s shapes and filled with an animated linearGradient driven by an <animateTransform> SVG primitive — no JS animation loop, no external animation library. React Native mirrors this exact structure under src/native, swapping native SVG primitives from react-native-svg for DOM SVG elements, so changing the gradient mechanism in Svg.tsx is the one change that would need to be mirrored across both platform trees to keep parity.

Tech Stack Written entirely in TypeScript against a react peer dependency (>=18), with zero runtime dependencies for the web bundle. Multi-target bundling is handled by Rollup, producing separate ESM, CommonJS, and UMD builds for web plus a dedicated ESM/CommonJS pair for the native entry point, with rollup-plugin-typescript2 and rollup-plugin-uglify doing type-checking and minification respectively. Storybook powers the interactive example/demo site, and the release process is automated with semantic-release, commitlint, and husky commit hooks on top of a pnpm-managed workspace.

Code Quality Both the web and native trees carry their own Jest configs and test suites (jest.web.config.js, jest.native.config.js) covering prop propagation, custom-shape rendering, and per-preset snapshot tests via react-test-renderer and its shallow renderer. Type-checking is wired into the test pipeline as its own step (test:tsc) rather than left as a side effect of building, and the public prop surface is centralized in one IContentLoaderProps interface extending SVGAttributes<SVGElement>, keeping the typed contract consistent across every preset. GitHub Actions workflows run this suite in CI, though there’s no dedicated lint step wired into the primary test script beyond the TypeScript compiler check.

API Design The API is deliberately minimal: a single default export that behaves as a full preset loader when used with no children and as a raw custom-shape canvas when SVG children are supplied, so getting started requires only one import. Every extra prop (colors, speed, gradient ratio, RTL, ARIA title) passes straight through with sensible defaults, and the companion create-content-loader visual tool removes the need to hand-calculate SVG coordinates for a fully custom skeleton, lowering the barrier for non-trivial layouts.