Facebook Pixel

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

  1. Create a LoadingSkeleton component.
  2. Show a skeleton UI (name line, bio line) while loading.
  3. Use a shimmer animation for a smooth user experience.
  4. 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

shimmer

Preview what you need to build

Companies:

twitter
netflix
linkedin

Solve Similar questions 🔥

Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.
Please Login.