feat: add lazy loading for application routes

[jikrana1]

Addressed Issues:

Fixes #140

Additional Notes:

• Added lazy loading for application pages using React.lazy().
• Added Suspense fallback with a loading spinner.
• This reduces the initial bundle size and loads pages only when needed.

Checklist

• My code follows the project's code style and conventions
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have joined the Discord server and shared this PR with the maintainers
• I have read the Contributing Guidelines

Summary by CodeRabbit

• Performance
  • Page components now load on demand, improving initial application loading.
• User Experience
  • A centered loading indicator is displayed while pages are loading.
• Navigation
  • Existing routes and fallback navigation behavior remain unchanged.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: e38d024d-235a-4e0a-b6e2-497dead1d47f

📥 Commits

Reviewing files that changed from the base of the PR and between 7007999 and 6ef3f5a.

📒 Files selected for processing (1)

• src/App.jsx

---

Walkthrough

App.jsx now uses dynamic imports for page components. Suspense displays a centered Spinner while the matched route loads. Existing routes, wildcard navigation, and rendered layout structure remain unchanged.

Changes

Route-based code splitting

Layer / File(s)	Summary
Lazy page declarations src/App.jsx	Page components use React.lazy with dynamic imports. Spinner is imported for loading feedback.
Suspense route rendering src/App.jsx	The existing route tree is wrapped in Suspense with a centered, accessible spinner fallback. Route mappings, wildcard navigation, layout structure, and the exported component remain unchanged.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related issues

• AOSSIE-Org/EduAid#475 — The change uses the same route-based code-splitting approach with React.lazy, dynamic imports, and a Suspense fallback.

Suggested labels: Typescript Lang

Suggested reviewers: rahul-vyas-dev

Sequence Diagram(s)

sequenceDiagram
  participant AppContent
  participant Suspense
  participant Routes
  participant LazyPage
  participant Spinner
  AppContent->>Suspense: Render the route tree
  Suspense->>Routes: Evaluate the current path
  Routes->>LazyPage: Load the matched page
  Suspense->>Spinner: Render fallback while the page loads
  LazyPage-->>Suspense: Provide the loaded page
  Suspense-->>AppContent: Render the page

Loading

Poem

I’m a rabbit watching pages split,
Each route loads when users pick it.
While chunks arrive through the air,
A spinner waits with gentle care.
Then the chosen view hops in. 🐇

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies lazy loading for application routes, which is the primary change described in the PR.
Linked Issues check	✅ Passed	The changes replace eager imports with React.lazy, add a Suspense spinner, and support the route-level code-splitting objective in issue [#140].
Out of Scope Changes check	✅ Passed	The changes stay within route lazy loading and loading-state behavior; the JSX expansion does not alter rendered structure or route paths.

✨ 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.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/App.jsx`:
- Around line 48-57: Update the loading fallback in App to expose an accessible
status for screen readers, adding an appropriate status role and accessible
loading label to the wrapper around Spinner. Keep the existing visual layout and
Spinner rendering unchanged.

🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: abf6d980-2f67-4c57-b86b-00da92b85d82

📥 Commits

Reviewing files that changed from the base of the PR and between 2098d23 and 7007999.

📒 Files selected for processing (1)

• src/App.jsx

[gitcordapp]

Link your account with Gitcord

Thanks for opening this PR, @jikrana1!

To receive Discord notifications and contributor tracking for this organization:

1. Join Discord: https://discord.gg/hjUhu33uAn
2. In Discord, run /link jikrana1
3. Paste the verification code into your GitHub bio (or a public gist)
4. Click Verify in Discord (or run /verify-link jikrana1)

Once linked, Gitcord can notify you about reviews, merges, and more.

— Posted by Gitcord