Loading States Usage Guide

Components Available

1. LoadingSpinner

Simple spinner for quick loads

import { LoadingSpinner } from '../shared/LoadingSpinner';

// Basic usage
<LoadingSpinner />

// With message
<LoadingSpinner message="Loading requests..." />

// Different sizes
<LoadingSpinner size="small" />
<LoadingSpinner size="medium" />  // default
<LoadingSpinner size="large" />

2. SkeletonLoader

Content-shaped placeholders for better UX

import { SkeletonLoader } from '../shared/SkeletonLoader';

// Dashboard skeleton
<SkeletonLoader type="dashboard" />

// Card skeleton
<SkeletonLoader type="card" />

// List skeleton
<SkeletonLoader type="list" count={5} />

// Table skeleton
<SkeletonLoader type="table" count={10} />

// Text lines
<SkeletonLoader type="text" lines={3} />

---

Integration Examples

Example 1: Fleet Dashboard

import { SkeletonLoader } from '../shared/SkeletonLoader';

function FleetOSFleetDashboard() {
  const [loading, setLoading] = useState(true);
  const [relationships, setRelationships] = useState([]);

  useEffect(() => {
    async function loadData() {
      setLoading(true);
      try {
        const data = await fetch Relationships();
        setRelationships(data);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    }
    loadData();
  }, []);

  if (loading) {
    return <SkeletonLoader type="dashboard" />;
  }

  return (
    <div>
      {/* Actual dashboard content */}
    </div>
  );
}

Example 2: Supplier Dashboard

import { LoadingSpinner } from '../common/LoadingSpinner';

function FleetOSSupplierDashboard() {
  const [loadingRequests, setLoadingRequests] = useState(true);
  const [requests, setRequests] = useState([]);

  useEffect(() => {
    fetchRequests().then(data => {
      setRequests(data);
      setLoadingRequests(false);
    });
  }, []);

  return (
    <div>
      <h2>Today's Dispatch</h2>
      {loadingRequests ? (
        <LoadingSpinner message="Loading service requests..." />
      ) : (
        <RequestList requests={requests} />
      )}
    </div>
  );
}

Example 3: Request Tracking Page

import { SkeletonLoader } from '../common/SkeletonLoader';

function FleetOSRequestTrackingPage({ token }: { token: string }) {
  const [loading, setLoading] = useState(true);
  const [request, setRequest] = useState(null);

  useEffect(() => {
    const subscription = supabase
      .channel(`request_${token}`)
      .on('postgres_changes', {...})
      .subscribe(() => {
        setLoading(false);
      });

    return () => subscription.unsubscribe();
  }, [token]);

  if (loading) {
    return (
      <div style={{ padding: '2rem' }}>
        <SkeletonLoader type="card" />
        <SkeletonLoader type="text" lines={5} />
      </div>
    );
  }

  return <RequestDetails request={request} />;
}

---

Best Practices

When to use LoadingSpinner:

• Quick data fetches (<2 seconds)

• Simple UI updates

• Button loading states

• Modal content loading

When to use SkeletonLoader:

• Dashboard page loads

• List/table data fetching

• Complex layouts

• Better perceived performance

Loading State Pattern:

function Component() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    setLoading(true);
    fetchData()
      .then(setData)
      .catch(setError)
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <SkeletonLoader type="dashboard" />;
  if (error) return <ErrorMessage error={error} />;
  if (!data) return <EmptyState />;

  return <ActualContent data={data} />;
}

---

Empty States

Don't forget to handle empty data:

if (loading) return <LoadingSpinner />;
if (error) return <ErrorMessage />;
if (!data || data.length === 0) {
  return (
    <div style={{ textAlign: 'center', padding: '3rem' }}>
      <p style={{ color: '#94a3b8' }}>No requests yet</p>
      <button onClick={handleCreate}>Create First Request</button>
    </div>
  );
}

---

TODO: Add Loading States

These dashboards still need loading states:

• FleetOSFleetDashboard.tsx - Replace immediate render with skeleton loader

• FleetOSSupplierDashboard.tsx - Add loading for "Today's Dispatch"

• FleetOSRequestTrackingPage.tsx - Add skeleton while subscription initializes

• PublicRequestFormHandler.tsx - Add loading when fetching supplier data

• ViralAnalyticsDashboard.tsx - Add loading for charts/metrics

Estimated time to add: ~15 minutes per dashboard

---

Testing Loading States

Force loading state in development:

// Add artificial delay for testing
useEffect(() => {
  setLoading(true);
  setTimeout(async () => {
    const data = await fetchData();
    setData(data);
    setLoading(false);
  }, 2000); // 2 second delay
}, []);

---

Status: ✅ Components ready, integration pending

Quick Win: Add to FleetOSFleetDashboard.tsx first (most visible)