From 454af38297808963d1e75018b7c9a6cb2c36ea67 Mon Sep 17 00:00:00 2001
From: ksjaay <ksjaay@gmail.com>
Date: Wed, 22 Oct 2025 17:35:20 +0100
Subject: [PATCH] Adds lazy loading to routers

---
 app/main.tsx      | 146 +++++++++++++++++++++++++++++++++-------------
 package-lock.json |   8 +--
 package.json      |   2 +-
 3 files changed, 110 insertions(+), 46 deletions(-)

diff --git a/app/main.tsx b/app/main.tsx
index dd4137fe..54a45a8c 100644
--- a/app/main.tsx
+++ b/app/main.tsx
@@ -11,21 +11,22 @@ import { GlobalProvider } from '@lunalytics/ui';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 // import local files
-import Login from './pages/login';
-import Register from './pages/register';
-import Home from './pages/home';
-import GlobalLayout from './layout/global';
-import Setttings from './pages/settings';
-import Verify from './pages/verify';
-import ErrorPage from './pages/error';
-import Notifications from './pages/notifications';
-import Setup from './pages/setup';
-import StatusConfigure from './pages/status-page';
-import StatusLayout from './layout/status';
-import StatusPage from './pages/status';
-import Incidents from './pages/incidents';
 import Loading from './components/ui/loading';
 
+const Home = React.lazy(() => import('./pages/home'));
+const Settings = React.lazy(() => import('./pages/settings'));
+const Notifications = React.lazy(() => import('./pages/notifications'));
+const StatusConfigure = React.lazy(() => import('./pages/status-page'));
+const StatusPage = React.lazy(() => import('./pages/status'));
+const Incidents = React.lazy(() => import('./pages/incidents'));
+const GlobalLayout = React.lazy(() => import('./layout/global'));
+const Login = React.lazy(() => import('./pages/login'));
+const Register = React.lazy(() => import('./pages/register'));
+const Setup = React.lazy(() => import('./pages/setup'));
+const Verify = React.lazy(() => import('./pages/verify'));
+const ErrorPage = React.lazy(() => import('./pages/error'));
+const StatusLayout = React.lazy(() => import('./layout/status'));
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <React.Suspense fallback={<Loading />}>
@@ -36,66 +37,129 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
             <Route
               path="/"
               element={
-                <StatusLayout>
-                  <StatusPage id="default" />
-                </StatusLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <StatusLayout>
+                    <StatusPage id="default" />
+                  </StatusLayout>
+                </React.Suspense>
               }
             />
             <Route
               path="/status/:statusPageId"
               element={
-                <StatusLayout>
-                  <StatusPage />
-                </StatusLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <StatusLayout>
+                    <StatusPage />
+                  </StatusLayout>
+                </React.Suspense>
               }
             />
             <Route
               path="/home"
               element={
-                <GlobalLayout>
-                  <Home />
-                </GlobalLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <GlobalLayout>
+                    <Home />
+                  </GlobalLayout>
+                </React.Suspense>
               }
             />
             <Route
               path="/notifications"
               element={
-                <GlobalLayout>
-                  <Notifications />
-                </GlobalLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <GlobalLayout>
+                    <Notifications />
+                  </GlobalLayout>
+                </React.Suspense>
               }
             />
             <Route
               path="/status-pages"
               element={
-                <GlobalLayout>
-                  <StatusConfigure />
-                </GlobalLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <GlobalLayout>
+                    <StatusConfigure />
+                  </GlobalLayout>
+                </React.Suspense>
               }
             />
             <Route
               path="/incidents"
               element={
-                <GlobalLayout>
-                  <Incidents />
-                </GlobalLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <GlobalLayout>
+                    <Incidents />
+                  </GlobalLayout>
+                </React.Suspense>
               }
             />
             <Route
               path="/settings"
               element={
-                <GlobalLayout>
-                  <Setttings />
-                </GlobalLayout>
+                <React.Suspense fallback={<Loading />}>
+                  <GlobalLayout>
+                    <Settings />
+                  </GlobalLayout>
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/login"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <Login />
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/register"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <Register />
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/setup"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <Setup />
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/verify"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <Verify />
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/error"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <ErrorPage />
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/404"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <ErrorPage />
+                </React.Suspense>
+              }
+            />
+            <Route
+              path="/*"
+              element={
+                <React.Suspense fallback={<Loading />}>
+                  <ErrorPage />
+                </React.Suspense>
               }
             />
-            <Route path="/login" element={<Login />} />
-            <Route path="/register" element={<Register />} />
-            <Route path="/setup" element={<Setup />} />
-            <Route path="/verify" element={<Verify />} />
-            <Route path="/error" element={<ErrorPage />} />
-            <Route path="/404" element={<ErrorPage />} />
-            <Route path="/*" element={<ErrorPage />} />
           </Routes>
         </BrowserRouter>
       </GlobalProvider>
diff --git a/package-lock.json b/package-lock.json
index 61c85b2e..0995b652 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lunalytics",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lunalytics",
-      "version": "0.10.6",
+      "version": "0.10.7",
       "license": "SEE LICENSE IN LICENSE",
       "dependencies": {
         "@dnd-kit/core": "6.3.1",
@@ -47,7 +47,7 @@
         "react-router-dom": "7.6.2",
         "react-toastify": "11.0.5",
         "react-window": "1.8.11",
-        "recharts": "^3.2.1",
+        "recharts": "3.2.1",
         "swapy": "1.0.5",
         "ua-parser-js": "2.0.3",
         "uuid": "11.1.0",
@@ -79,7 +79,7 @@
         "sass": "1.89.2",
         "typescript": "5.9.2",
         "typescript-eslint": "8.39.1",
-        "vite": "^7.1.11",
+        "vite": "7.1.11",
         "vite-plugin-compression2": "2.2.0",
         "vitest": "3.2.4"
       },
diff --git a/package.json b/package.json
index 26a1fa19..0b623d1d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lunalytics",
-  "version": "0.10.6",
+  "version": "0.10.7",
   "description": "Open source Node.js server/website monitoring tool",
   "private": true,
   "author": "KSJaay <ksjaay@gmail.com>",