perf(frontend): Implement Lazy Image Loading and Route Chunking for Faster Web App Initial Load

[advikdivekar]

Summary

Fixes #638

This PR refactors App.jsx to use React.lazy() and Suspense boundaries for all route-level components, dramatically reducing the initial JS bundle size on first load.

Changes

• Frontend/src/App.jsx — Full lazy routing refactor

  • All 35+ page components converted to React.lazy() dynamic imports
  • Grouped by route category for Vite's automatic chunk splitting:
    • Auth pages (Login, Signup, ForgotPassword, etc.) remain eagerly loaded — critical path
    • Route guards (AdminProtectedRoute, ProtectedRoute) remain eagerly loaded — tiny, needed before any lazy chunk loads
    • User pages, admin pages, master-admin pages, marketing, and legal pages all lazily loaded
  • Each route is wrapped in its own Suspense boundary with context-appropriate fallback
  • AnimatePresence moved to inner AppRoutes component so useLocation() hook works correctly

• Frontend/src/components/ui/page-skeleton.jsx — Skeleton loader components

  • PageSkeleton: full-app shell skeleton with top nav shimmer, sidebar shimmer, stat card grid, content rows with avatar placeholders — used for all authenticated routes
  • MinimalSkeleton: centered card shimmer — used for auth, lobby, and legal pages
  • Both use Tailwind animate-pulse shimmer and include role="status" + aria-label for accessibility

Bundle impact

Before: single index.js chunk (~all pages bundled together)
After: per-route chunks loaded on demand — landing page visits no longer download admin or user page code

Test Plan

• Run npm run dev — app loads, no console errors
• Navigate to /user/dashboard — PageSkeleton flashes briefly then content renders
• Navigate to /admin/settings — admin chunk loads on demand
• Run npm run build — verify Rollup outputs multiple chunks, vendor chunk present
• Test 404 route — NotFound component renders correctly

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[vercel]

@advikdivekar is attempting to deploy a commit to the ritesh Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2d7e12df-4b73-4b5e-b0bc-04168dde4fe8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[advikdivekar]

@ritesh-1918 please review my PR, thank you