How to show skeleton loaders in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Skeleton loaders provide better user experience than spinners by showing content placeholders that match the layout of actual data. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented skeleton screens in enterprise applications throughout my 11 years of React development. The most straightforward approach is creating reusable skeleton components with CSS animations that mimic your content structure. This method improves perceived performance and reduces layout shift when data loads.
Create skeleton components with animated backgrounds to display while data loads.
const Skeleton = ({ width = '100%', height = '20px' }) => (
<div
style={{
width,
height,
background: 'linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)',
backgroundSize: '200% 100%',
animation: 'loading 1.5s infinite',
borderRadius: '4px'
}}
/>
)
const UserCardSkeleton = () => (
<div>
<Skeleton width='60px' height='60px' />
<Skeleton width='150px' height='20px' />
<Skeleton width='200px' height='16px' />
</div>
)
const App = () => {
const [loading, setLoading] = useState(true)
const [data, setData] = useState(null)
return loading ? <UserCardSkeleton /> : <UserCard data={data} />
}
Here the Skeleton component uses a linear gradient background that animates from side to side, creating a shimmer effect. The gradient moves using CSS animation defined with backgroundSize and keyframes. Multiple skeleton components are composed to match the structure of the actual content, providing visual continuity.
Best Practice Note:
This is the approach we use in CoreUI components for loading states in cards, lists, and tables. Always match skeleton dimensions to your actual content layout, and add a global CSS animation for the shimmer effect to avoid inline style repetition.
