🔄 Showing Loading Indicators in React

Loading indicators help users understand that data is being fetched or a process is in progress. In React, you can easily show loaders using conditional rendering based on a loading state.

🕓 1. Simple Text or Spinner

You can show a loading message or a custom spinner using conditional rendering:

function UserList({ isLoading, users }) {
  if (isLoading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}

⚙️ 2. Tailwind CSS Spinner

Use Tailwind utility classes to make a basic spinning loader:

<div className="flex justify-center items-center">
  <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
</div>

🧩 3. Reusable Loader Component

You can encapsulate a spinner into a reusable component:

function Spinner() {
  return (
    <div className="flex justify-center items-center">
      <div className="w-6 h-6 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
    </div>
  );
}

// Usage
{isLoading ? <Spinner /> : <UserList users={data} />}

📦 4. Using Libraries (Optional)

• react-loader-spinner
• react-spinners
• lottie-react for animated illustrations

// Example: react-loader-spinner
import { Circles } from 'react-loader-spinner';

<Circles height="80" width="80" color="#4fa94d" ariaLabel="loading" />

✅ 5. Summary

• Track isLoading state in your component
• Show a loader UI while data is fetching
• Use Tailwind or third-party libraries to customize appearance