How to Create Skeleton Loader in React: Simple Guide

To create a skeleton loader in React, use a functional component that renders placeholder elements styled with CSS animations to mimic loading content. Use useState and useEffect to simulate data loading and replace the skeleton with actual content once loaded.

Syntax

A skeleton loader in React typically uses a functional component that returns placeholder elements styled with CSS. You use useState to track loading state and useEffect to simulate or handle data fetching. The skeleton elements have animated backgrounds to indicate loading.

• SkeletonLoader: The component showing placeholders.
• loading: State boolean to toggle skeleton or real content.
• useEffect: Simulates data fetch delay.
• CSS animation: Creates the shimmer effect on placeholders.

jsx

import React, { useState, useEffect } from 'react';

function SkeletonLoader() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3000);
    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return (
      <div className="skeleton">
        <div className="skeleton-avatar"></div>
        <div className="skeleton-text"></div>
      </div>
    );
  }

  return <div>Actual content loaded!</div>;
}

export default SkeletonLoader;

Output

Displays animated gray blocks for 3 seconds, then shows 'Actual content loaded!' text.

Example

This example shows a simple skeleton loader with a circle avatar and a text bar. The loader uses CSS animations for a shimmer effect. After 3 seconds, it switches to real content.

jsx

import React, { useState, useEffect } from 'react';
import './SkeletonLoader.css';

function SkeletonLoader() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3000);
    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return (
      <div className="skeleton">
        <div className="skeleton-avatar"></div>
        <div className="skeleton-text"></div>
      </div>
    );
  }

  return <div><strong>Content loaded!</strong> Here is your data.</div>;
}

export default SkeletonLoader;

Output

Shows a gray circle and a gray rectangle with a shimmer animation for 3 seconds, then displays 'Content loaded! Here is your data.'

Common Pitfalls

Common mistakes when creating skeleton loaders include:

• Not using CSS animations, resulting in static placeholders that don't indicate loading.
• Forgetting to clear timers in useEffect, which can cause memory leaks.
• Replacing skeleton too early before data is ready, confusing users.
• Using too many complex elements inside skeleton, which hurts performance.

jsx

/* Wrong: No animation and no cleanup */
function BadSkeleton() {
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    setTimeout(() => setLoading(false), 3000);
  }, []);

  if (loading) {
    return <div style={{background: '#ccc', height: '20px', width: '100px'}}></div>;
  }
  return <div>Loaded</div>;
}

/* Right: Add animation and clear timeout */
function GoodSkeleton() {
  const [loading, setLoading] = React.useState(true);
  React.useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 3000);
    return () => clearTimeout(timer);
  }, []);

  if (loading) {
    return <div className="animated-skeleton"></div>;
  }
  return <div>Loaded</div>;
}

Quick Reference

• Use useState to track loading state.
• Use useEffect to simulate or handle data fetching.
• Style skeleton elements with CSS animations for shimmer effect.
• Clear timers in useEffect cleanup to avoid leaks.
• Keep skeleton simple and visually similar to final content shape.

Key Takeaways

Use functional components with useState and useEffect to manage loading state.

Create skeleton placeholders styled with CSS animations for a smooth shimmer effect.

Always clear timers in useEffect cleanup to prevent memory leaks.

Keep skeleton UI simple and visually close to the real content layout.

Replace skeleton with actual content only after data is fully loaded.