finds.dev← search

// the find

danilowoz/react-content-loader

★ 13,997 · TypeScript · MIT · updated Jan 2026

⚪ SVG-Powered component to easily create skeleton loadings.

react-content-loader generates SVG-based skeleton screens — those animated grey placeholder shapes you see while content loads. Under 2kB with zero dependencies for web, and it covers React Native too via react-native-svg. Good fit for anyone who wants skeleton loading without pulling in a heavier UI library.

The SVG approach is genuinely clever: shapes are defined declaratively as SVG children, the shimmer animation is a single SVG gradient, and the whole thing weighs almost nothing. The online visual editor at danilowoz.com/create-content-loader makes building custom skeletons fast without guessing at coordinate math. React Native support shares the same API, so teams shipping both platforms don't learn two systems. The `uniqueKey` prop solves the SSR hydration mismatch properly rather than papering over it.

The preset library is tiny — Facebook card, Instagram, code, list, bullet list — so anything real requires hand-coding SVG coordinates, which gets tedious for complex layouts. No auto-sizing: you have to set explicit viewBox and width/height, then fight SVG scaling rules to make it responsive (the README's own workaround is a bit awkward). The Safari rgba bug with opacity props is a leaky abstraction that has been around for years with no cleaner fix. Last meaningful activity was mid-2024; the repo is effectively in maintenance mode, so don't expect new presets or API evolution.

View on GitHub → Homepage ↗

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →