DEV Community

Cover image for React with Tailwind CSS Skeleton Loader Example
Aaronn
Aaronn

Posted on • Originally published at frontendshape.com

React with Tailwind CSS Skeleton Loader Example

In this section, we'll see Skeleton Loading in React.js with the help of Tailwind CSS. We'll cover various aspects, including animating skeletons, displaying skeletons while fetching user data on page load, and creating a Skeleton Loading example in a React TypeScript application.
Install & Setup Tailwind CSS + React + Typescript + Vite

  1. Create a Basic Skeleton Loading UI in React.js with Tailwind CSS.
export default function SkeletonLoader() {
  return (
    <div className="animate-pulse space-y-4 lg:max-w-xl w-full">
      <div className="flex space-x-4">
        <div className="rounded-full bg-gray-400 h-12 w-12"></div>
        <div className="flex-1 space-y-4 py-1">
          <div className="h-4 bg-gray-400 rounded w-3/4"></div>
          <div className="space-y-2">
            <div className="h-4 bg-gray-400 rounded"></div>
            <div className="h-4 bg-gray-400 rounded w-5/6"></div>
          </div>
        </div>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

skeleton loading ui
2.Building a on page Skeleton Loader in React.js with Tailwind CSS Using useStateand useEffectHooks.

import { useState, useEffect } from "react";

export default function App() {
  const [profile, setProfile] = useState(null);

  useEffect(() => {
    const fetchData = () => {
      setTimeout(() => {
        return setProfile({
          name: "Jane Doe",
          bio: "Software Developer at Tech Corp.",
        });
      }, 3000);
    };

    fetchData();
  }, []);

  const SkeletonLoader = () => (
    <div className="animate-pulse flex space-x-4 lg:max-w-xl w-full">
      <div className="rounded-full bg-gray-400 h-12 w-12"></div>
      <div className="flex-1 space-y-4 py-1">
        <div className="h-4 bg-gray-400 rounded w-3/4"></div>
        <div className="space-y-2">
          <div className="h-4 bg-gray-400 rounded"></div>
          <div className="h-4 bg-gray-400 rounded w-5/6"></div>
        </div>
      </div>
    </div>
  );

  const UserProfile = ({ profile }) => (
    <div className="flex space-x-4">
      <div className="rounded-full bg-blue-500 h-12 w-12 flex items-center justify-center text-white font-bold">
        JD
      </div>
      <div className="flex-1 space-y-4 py-1">
        <div className="text-xl font-semibold">{profile.name}</div>
        <div>{profile.bio}</div>
      </div>
    </div>
  );

  return (
    <div className="App">
      <header className="App-header p-5">
        {!profile ? <SkeletonLoader /> : <UserProfile profile={profile} />}
      </header>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

on page skeleton loader
3.React Typescript with Tailwind CSS Skeleton Loader Using useState and useEffectHooks.

import { useState, useEffect } from "react";

interface ProfileData {
  name: string;
  bio: string;
}

const App: React.FC = () => {
  const [profile, setProfile] = useState<ProfileData | null>(null);

  useEffect(() => {
    const fetchData = () => {
      setTimeout(() => {
        setProfile({
          name: "Jane Doe",
          bio: "Software Developer at Tech Corp.",
        });
      }, 3000);
    };

    fetchData();
  }, []);

  const SkeletonLoader: React.FC = () => (
    <div className="animate-pulse flex space-x-4 lg:max-w-xl w-full">
      <div className="rounded-full bg-gray-400 h-12 w-12"></div>
      <div className="flex-1 space-y-4 py-1">
        <div className="h-4 bg-gray-400 rounded w-3/4"></div>
        <div className="space-y-2">
          <div className="h-4 bg-gray-400 rounded"></div>
          <div className="h-4 bg-gray-400 rounded w-5/6"></div>
        </div>
      </div>
    </div>
  );

  const UserProfile: React.FC<{ profile: ProfileData }> = ({ profile }) => (
    <div className="flex space-x-4">
      <div className="rounded-full bg-blue-500 h-12 w-12 flex items-center justify-center text-white font-bold">
        JD
      </div>
      <div className="flex-1 space-y-4 py-1">
        <div className="text-xl font-semibold">{profile.name}</div>
        <div>{profile.bio}</div>
      </div>
    </div>
  );

  return (
    <div className="App">
      <header className="App-header p-5">
        {!profile ? <SkeletonLoader /> : <UserProfile profile={profile} />}
      </header>
    </div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Sources

react useState (react.dev)

react useEffect (react.dev)

Tailwind CSS (tailwindcss.com)

typescriptlang.org

Top comments (0)