Build skeleton placeholders shown while content loads.
01
01
Understand the problem
ReactLoadingUI
02
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Stuck? AI Nudge Available
Get a conceptual hint to guide your logic without spoiling the final implementation.
03
03
Study the solution
Solve in
The solution is waiting
Give it an honest attempt first — then compare your thinking with the full walkthrough.
04
04
React solution
Complete solutionRun Playground
import React, { useState, useEffect } from 'react';
import { Card, CardSkeleton } from './src/SkeletonLoader';
export default function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
const id = setTimeout(() => setLoading(false), 2000);
return () => clearTimeout(id);
}, [loading]);
return (
<div style={{ fontFamily: 'sans-serif', padding: 20 }}>
<h1>Skeleton Loader Demo</h1>
<button onClick={() => setLoading(true)} style={{ marginBottom: 16, padding: '6px 12px', cursor: 'pointer' }}>
Reload
</button>
{loading ? <CardSkeleton /> : <Card />}
</div>
);
}05
05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.