Loading States, Error States, and Empty States

[calebyhan]

Motivation

Every page that fetches data needs proper loading, error, and empty states. Adding these consistently across the app makes it feel polished and production-ready.

Deliverables

• Create reusable components:
  • src/components/ui/LoadingSpinner.tsx — centered spinner with optional message
  • src/components/ui/ErrorMessage.tsx — error card with message and retry button
  • src/components/ui/EmptyState.tsx — friendly message when no data exists (icon + text)
• Add loading states to all pages that fetch data (show spinner while loading)
• Add error states to all pages (show error message with retry on API failure)
• Add empty states where applicable (e.g., no news articles, no legislation found, no events this month)
• Ensure Next.js loading.tsx files exist for route-level loading indicators

Important Notes

• Depends on all frontend page tickets being complete
• This is a sweep across all pages — check each one and add missing states
• Use Shadcn Skeleton component for content loading placeholders where appropriate
• Keep error messages user-friendly: "Unable to load news articles. Please try again." not "500 Internal Server Error"