React with Tailwind CSS Skeleton Loader Example
Tags: react, tailwindcss, webdev
Published: 2024-05-28 18:14:58

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](https://frontendshape.com/post/install-setup-tailwind-css-react-18-typescript-vite)
1. Create a Basic Skeleton Loading UI in React.js with Tailwind CSS.
```jsx
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>
  );
}
```
![skeleton loading ui](https://frontendshape.com/wp-content/uploads/2024/05/O7dSDLDL3RmhrkdvAJqLKxE9EXOCIppJeatcGRxQ.png)
2.Building a on page Skeleton Loader in React.js with Tailwind CSS Using `useState `and `useEffect `Hooks.
```jsx
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>
  );
}
```
![on page skeleton loader](https://frontendshape.com/wp-content/uploads/2024/05/JevOFDj1Epaiww3BOC7mEqZyhl6JEcHslJXkguf3.png)
3.React Typescript with Tailwind CSS Skeleton Loader Using `useState` and `useEffect `Hooks.
```jsx
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;
```
**Sources**

[react useState](https://react.dev/reference/react/useState) (react.dev)

[react useEffect](https://react.dev/reference/react/useEffect) (react.dev)

[Tailwind CSS](https://tailwindcss.com/) (tailwindcss.com)

[typescriptlang.org](https://www.typescriptlang.org/)