Missing Loading State

Client components that fetch without a loading state

infoReliabilitymissing-loading-state

Why this matters

Without a loading state, users see a blank screen or stale content while data fetches. This makes the app feel broken, even when it's working correctly.

✗ Bad

"use client";

export function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`/api/users/${id}`)
      .then(r => r.json())
      .then(setUser);
  }, [id]);

  return <div>{user?.name}</div>;
}

✓ Good

"use client";

export function UserProfile({ id }: { id: string }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`/api/users/${id}`)
      .then(r => r.json())
      .then(setUser)
      .finally(() => setLoading(false));
  }, [id]);

  if (loading) return <Skeleton />;
  return <div>{user?.name}</div>;
}

How to fix

Add loading and error states to every component that fetches data. Show a skeleton or spinner while loading.

All rules