React Loading Skeleton
Quick Start
- •Import CSS once in a global entry (e.g.,
src/app/layout.tsx):- •
import "react-loading-skeleton/dist/skeleton.css";
- •
- •Use
<Skeleton />inline where data is missing. - •Prefer skeletons inside the real component instead of separate skeleton screens.
Patterns
- •Inline fallback:
{data ? <Real /> : <Skeleton />} - •Lists:
<Skeleton count={3} />or map items and vary widths - •Avatars/rounds:
<Skeleton circle width={40} height={40} /> - •Global theming: wrap with
SkeletonTheme
References
- •API, props, pitfalls, and examples:
references/react-loading-skeleton-v3.md