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.