Animated Loading Skeleton
React.js
medium
35 mins
Create a React component named LoadingSkeleton that simulates loading a user profile card. While loading, show an animated skeleton (grey boxes and lines with a shimmer effect). After 2 seconds, replace it with real profile content: an image, name, and bio.
Requirements
- Create a
LoadingSkeletoncomponent. - Show a skeleton UI (name line, bio line) while loading.
- Use a shimmer animation for a smooth user experience.
- After 2 seconds, display:
- A user image (placeholder)
- User name (e.g., John Doe)
- Bio (e.g., Full-stack developer at XYZ company)
Reference UI

Preview what you need to build
Companies:
twitter
netflix
linkedin
Solve Similar questions 🔥
Want to upskill? Explore our courses!
Namaste DSA
Master DSA from scratch with numerous problems, and expert guidance.
Namaste React
Wanna dive deep into React and become Frontend Expert? Learn with me now!
Namaste Frontend System Design
The most comprehensive and detailed course for frontend system design.
Namaste Node.js
Wanna dive deep into Node.js? Enroll into `Namaste Node.js` now!
