From 94634a319895532098beb59e83ee778f0d5701fb Mon Sep 17 00:00:00 2001
From: Your Name <dushyantacharya873@gmail.com>
Date: Thu, 3 Sep 2026 08:29:05 +0530
Subject: [PATCH 1/3] feat(routes): implement code splitting and lazy loading
 for application pages

Closes #140

Replaces static page imports in App.jsx with React.lazy dynamic imports. Wraps the route definitions in a Suspense boundary with an accessible Spinner fallback loader and an ErrorBoundary to gracefully handle route loading failures.
---
 src/App.jsx | 94 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 69 insertions(+), 25 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 56d854d..b552dd0 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,21 +1,61 @@
-import React from 'react'
+import React, { Suspense, Component } from 'react'
 import { Routes, Route, Navigate } from 'react-router-dom'
 import { AppProvider } from './context/AppContext'
 import { ThemeProvider } from './context/ThemeContext'
 import Navbar          from './components/Navbar'
 import RateLimitBanner from './components/RateLimitBanner'
-import HomePage        from './pages/HomePage'
-import OverviewPage    from './pages/OverviewPage'
-import RepositoriesPage from './pages/RepositoriesPage'
-import ContributorsPage from './pages/ContributorsPage'
-import ContributorProfilePage from './pages/ContributorProfilePage'
-import NetworkPage     from './pages/NetworkPage'
-import AnalyticsPage   from './pages/AnalyticsPage'
-import GovernancePage  from './pages/GovernancePage'
-import SettingsPage    from './pages/SettingsPage'
-import Footer from './components/layout/Footer'
-import Support from './pages/Support'
+import Footer          from './components/layout/Footer'
 import RequireAnalysis from './components/RequireAnalysis'
+import { Spinner }     from './components/UI'
+
+const HomePage               = React.lazy(() => import('./pages/HomePage'))
+const OverviewPage           = React.lazy(() => import('./pages/OverviewPage'))
+const RepositoriesPage        = React.lazy(() => import('./pages/RepositoriesPage'))
+const ContributorsPage       = React.lazy(() => import('./pages/ContributorsPage'))
+const ContributorProfilePage = React.lazy(() => import('./pages/ContributorProfilePage'))
+const NetworkPage            = React.lazy(() => import('./pages/NetworkPage'))
+const AnalyticsPage          = React.lazy(() => import('./pages/AnalyticsPage'))
+const GovernancePage         = React.lazy(() => import('./pages/GovernancePage'))
+const SettingsPage           = React.lazy(() => import('./pages/SettingsPage'))
+const Support                = React.lazy(() => import('./pages/Support'))
+
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false }
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error('Route load error:', error, errorInfo)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '64px 16px', textAlign: 'center' }}>
+          <h3>Unable to load page</h3>
+          <p style={{ color: 'var(--text2)', marginBottom: '16px' }}>A network error occurred while loading this section.</p>
+          <button className="btn btn-primary" onClick={() => window.location.reload()}>
+            Reload Page
+          </button>
+        </div>
+      )
+    }
+    return this.props.children
+  }
+}
+
+function PageLoader() {
+  return (
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }} role="status" aria-label="Loading page">
+      <Spinner size={36} />
+    </div>
+  )
+}
 
 function Layout({ children }) {
   return (
@@ -31,19 +71,23 @@ function Layout({ children }) {
 function AppContent() {
   return (
     <Layout>
-      <Routes>
-        <Route path="/"             element={<HomePage />} />
-        <Route path="/overview"     element={<RequireAnalysis><OverviewPage /></RequireAnalysis>} />
-        <Route path="/repositories" element={<RequireAnalysis><RepositoriesPage /></RequireAnalysis>} />
-        <Route path="/contributors" element={<RequireAnalysis><ContributorsPage /></RequireAnalysis>} />
-        <Route path="/contributors/:username" element={<RequireAnalysis><ContributorProfilePage /></RequireAnalysis>} />
-        <Route path="/network"      element={<RequireAnalysis><NetworkPage /></RequireAnalysis>} />
-        <Route path="/analytics"    element={<RequireAnalysis><AnalyticsPage /></RequireAnalysis>} />
-        <Route path="/governance"   element={<RequireAnalysis><GovernancePage /></RequireAnalysis>} />
-        <Route path="/settings"     element={<SettingsPage />} />
-        <Route path="/support-us"      element={<Support />} />
-        <Route path="*"             element={<Navigate to="/" replace />} />
-      </Routes>
+      <ErrorBoundary>
+        <Suspense fallback={<PageLoader />}>
+          <Routes>
+            <Route path="/"             element={<HomePage />} />
+            <Route path="/overview"     element={<RequireAnalysis><OverviewPage /></RequireAnalysis>} />
+            <Route path="/repositories" element={<RequireAnalysis><RepositoriesPage /></RequireAnalysis>} />
+            <Route path="/contributors" element={<RequireAnalysis><ContributorsPage /></RequireAnalysis>} />
+            <Route path="/contributors/:username" element={<RequireAnalysis><ContributorProfilePage /></RequireAnalysis>} />
+            <Route path="/network"      element={<RequireAnalysis><NetworkPage /></RequireAnalysis>} />
+            <Route path="/analytics"    element={<RequireAnalysis><AnalyticsPage /></RequireAnalysis>} />
+            <Route path="/governance"   element={<RequireAnalysis><GovernancePage /></RequireAnalysis>} />
+            <Route path="/settings"     element={<SettingsPage />} />
+            <Route path="/support-us"   element={<Support />} />
+            <Route path="*"             element={<Navigate to="/" replace />} />
+          </Routes>
+        </Suspense>
+      </ErrorBoundary>
     </Layout>
   )
 }

From 78ea7e2664a59639109f0845d8ec19c8856d800d Mon Sep 17 00:00:00 2001
From: Your Name <dushyantacharya873@gmail.com>
Date: Thu, 3 Sep 2026 19:18:03 +0530
Subject: [PATCH 2/3] fix(app): update ErrorBoundary fallback message to
 generic error wording

---
 src/App.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.jsx b/src/App.jsx
index b552dd0..a41789b 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -38,7 +38,7 @@ class ErrorBoundary extends Component {
       return (
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '64px 16px', textAlign: 'center' }}>
           <h3>Unable to load page</h3>
-          <p style={{ color: 'var(--text2)', marginBottom: '16px' }}>A network error occurred while loading this section.</p>
+          <p style={{ color: 'var(--text2)', marginBottom: '16px' }}>An error occurred while loading this page.</p>
           <button className="btn btn-primary" onClick={() => window.location.reload()}>
             Reload Page
           </button>

From a53bb0d1090f2eeebc5a786edda8cd9fa09e2602 Mon Sep 17 00:00:00 2001
From: Your Name <dushyantacharya873@gmail.com>
Date: Thu, 3 Sep 2026 19:25:43 +0530
Subject: [PATCH 3/3] refactor(app): externalize loading and error strings into
 ROUTE_STRINGS resource object

---
 src/App.jsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index a41789b..cb99769 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -17,7 +17,12 @@ const NetworkPage            = React.lazy(() => import('./pages/NetworkPage'))
 const AnalyticsPage          = React.lazy(() => import('./pages/AnalyticsPage'))
 const GovernancePage         = React.lazy(() => import('./pages/GovernancePage'))
 const SettingsPage           = React.lazy(() => import('./pages/SettingsPage'))
-const Support                = React.lazy(() => import('./pages/Support'))
+const ROUTE_STRINGS = {
+  ERROR_TITLE: 'Unable to load page',
+  ERROR_MESSAGE: 'An error occurred while loading this page.',
+  RELOAD_BUTTON: 'Reload Page',
+  LOADING_LABEL: 'Loading page',
+}
 
 class ErrorBoundary extends Component {
   constructor(props) {
@@ -37,10 +42,10 @@ class ErrorBoundary extends Component {
     if (this.state.hasError) {
       return (
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '64px 16px', textAlign: 'center' }}>
-          <h3>Unable to load page</h3>
-          <p style={{ color: 'var(--text2)', marginBottom: '16px' }}>An error occurred while loading this page.</p>
+          <h3>{ROUTE_STRINGS.ERROR_TITLE}</h3>
+          <p style={{ color: 'var(--text2)', marginBottom: '16px' }}>{ROUTE_STRINGS.ERROR_MESSAGE}</p>
           <button className="btn btn-primary" onClick={() => window.location.reload()}>
-            Reload Page
+            {ROUTE_STRINGS.RELOAD_BUTTON}
           </button>
         </div>
       )
@@ -51,7 +56,7 @@ class ErrorBoundary extends Component {
 
 function PageLoader() {
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }} role="status" aria-label="Loading page">
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '60vh' }} role="status" aria-label={ROUTE_STRINGS.LOADING_LABEL}>
       <Spinner size={36} />
     </div>
   )