From 7007999d2171e13ac3efd83521d0467642a993a5 Mon Sep 17 00:00:00 2001
From: jikrana <jikrana.dev@gmail.com>
Date: Wed, 12 Aug 2026 12:23:19 +0530
Subject: [PATCH 1/2] feat: add lazy loading for application routes

---
 src/App.jsx | 91 ++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 63 insertions(+), 28 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 94f8d27..b6cc58d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,27 +1,40 @@
-import React from 'react'
+import React, { lazy, Suspense } 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 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 { Spinner } from './components/UI'
+
+// Lazy-loaded pages
+const HomePage = lazy(() => import('./pages/HomePage'))
+const OverviewPage = lazy(() => import('./pages/OverviewPage'))
+const RepositoriesPage = lazy(() => import('./pages/RepositoriesPage'))
+const ContributorsPage = lazy(() => import('./pages/ContributorsPage'))
+const ContributorProfilePage = lazy(() => import('./pages/ContributorProfilePage'))
+const NetworkPage = lazy(() => import('./pages/NetworkPage'))
+const AnalyticsPage = lazy(() => import('./pages/AnalyticsPage'))
+const GovernancePage = lazy(() => import('./pages/GovernancePage'))
+const SettingsPage = lazy(() => import('./pages/SettingsPage'))
+const Support = lazy(() => import('./pages/Support'))
 
 function Layout({ children }) {
   return (
-    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <div
+      style={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column'
+      }}
+    >
       <Navbar />
       <RateLimitBanner />
-      <main style={{ flex: 1 }}>{children}</main>
+
+      <main style={{ flex: 1 }}>
+        {children}
+      </main>
+
       <Footer />
     </div>
   )
@@ -30,19 +43,41 @@ function Layout({ children }) {
 function AppContent() {
   return (
     <Layout>
-      <Routes>
-        <Route path="/"             element={<HomePage />} />
-        <Route path="/overview"     element={<OverviewPage />} />
-        <Route path="/repositories" element={<RepositoriesPage />} />
-        <Route path="/contributors" element={<ContributorsPage />} />
-        <Route path="/contributors/:username" element={<ContributorProfilePage />} />
-        <Route path="/network"      element={<NetworkPage />} />
-        <Route path="/analytics"    element={<AnalyticsPage />} />
-        <Route path="/governance"   element={<GovernancePage />} />
-        <Route path="/settings"     element={<SettingsPage />} />
-        <Route path="/support-us"      element={<Support />} />
-        <Route path="*"             element={<Navigate to="/" replace />} />
-      </Routes>
+      <Suspense
+        fallback={
+          <div
+            style={{
+              minHeight: '60vh',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <Spinner />
+          </div>
+        }
+      >
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/overview" element={<OverviewPage />} />
+          <Route path="/repositories" element={<RepositoriesPage />} />
+          <Route path="/contributors" element={<ContributorsPage />} />
+          <Route
+            path="/contributors/:username"
+            element={<ContributorProfilePage />}
+          />
+          <Route path="/network" element={<NetworkPage />} />
+          <Route path="/analytics" element={<AnalyticsPage />} />
+          <Route path="/governance" element={<GovernancePage />} />
+          <Route path="/settings" element={<SettingsPage />} />
+          <Route path="/support-us" element={<Support />} />
+
+          <Route
+            path="*"
+            element={<Navigate to="/" replace />}
+          />
+        </Routes>
+      </Suspense>
     </Layout>
   )
 }
@@ -55,4 +90,4 @@ export default function App() {
       </AppProvider>
     </ThemeProvider>
   )
-}
+}
\ No newline at end of file

From 6ef3f5a516e8377c19a85f84b2e9011a9dfa8329 Mon Sep 17 00:00:00 2001
From: jikrana <jikrana.dev@gmail.com>
Date: Wed, 12 Aug 2026 22:58:22 +0530
Subject: [PATCH 2/2] fix: add accessible route loading status

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

diff --git a/src/App.jsx b/src/App.jsx
index b6cc58d..3dcbfe3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -46,6 +46,8 @@ function AppContent() {
       <Suspense
         fallback={
           <div
+            role="status"
+            aria-label="Loading page"
             style={{
               minHeight: '60vh',
               display: 'flex',