Improve Suspense Loader

[Alexandrbig1]

Priority: Medium
Difficulty: Beginner-Friendly
Type: Frontend Enhancement

---

Description

Improve the Suspense fallback loader for better UX. Instead of plain text "Loading content...", display a centered animated loader with consistent page height.

---

Requirements

1. Suspense Fallback

   • Replace existing text loader with an animated spinner or skeleton loader.
   • Loader should be vertically and horizontally centered in the viewport.

2. Layout

   • The main content wrapper (<main>) should have min-height: 100vh.
   • This ensures the footer always stays at the bottom and doesn’t “jump” when loading finishes.

3. Accessibility

   • Keep role="status" and aria-live="polite" for screen readers.
   • Provide descriptive text like "Loading content" but visually hidden (for accessibility).

4. Design

   • Use a simple CSS spinner, Tailwind animation, or a skeleton loader.
   • Colors: use project’s primary accent color for the spinner.

---

Assets

---

Acceptance Criteria

• Loader shows in the center of page while Suspense is loading.
• Footer stays pinned below (thanks to min-height: 100vh).
• Accessible loading text is still announced for screen readers.
• Once content loads, loader disappears and <Outlet /> content is displayed.

[justintucker]

I'll take this one

[Alexandrbig1]

@justintucker, thanks for your interest. I've assigned you to this task. Looking forward to your PR's.