From b198dc0ec88be644ed65a64e3dd23b6bc74cc088 Mon Sep 17 00:00:00 2001
From: Nawaz Dhandala <hello@nawazdhandala.com>
Date: Sat, 14 Feb 2026 19:54:05 +0000
Subject: [PATCH] refactor: Enhance lazy loading of components in StatusPage
 for improved type safety and maintainability

---
 Dashboard/src/App.tsx  | 126 ++++++++++++++++++++++++--------------
 StatusPage/src/App.tsx | 136 +++++++++++++++++++++++++----------------
 2 files changed, 165 insertions(+), 97 deletions(-)

diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index def8fc055b..14f6d057c6 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -53,131 +53,165 @@ import MyOnCallPolicies from "./Pages/Global/MyOnCallPolicies";
 import PageNotFound from "./Pages/PageNotFound/PageNotFound";
 
 // Lazy-loaded route bundles (all routes in one bundle to minimize chunk count)
+type AllRoutesModule = typeof import("./Routes/AllRoutes");
 const InitRoutes: React.LazyExoticComponent<
   React.FunctionComponent<RoutesProps>
 > = lazy(() => {
   return import("./Routes/InitRoutes");
 });
 
-const LogsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
-    return { default: m.LogsRoutes };
+const LogsRoutes: React.LazyExoticComponent<AllRoutesModule["LogsRoutes"]> =
+  lazy(() => {
+    return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
+      return { default: m.LogsRoutes };
+    });
   });
-});
-const MetricsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const MetricsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["MetricsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.MetricsRoutes,
     };
   });
 });
-const TracesRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
-    return {
-      default: m.TracesRoutes,
-    };
+const TracesRoutes: React.LazyExoticComponent<AllRoutesModule["TracesRoutes"]> =
+  lazy(() => {
+    return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
+      return {
+        default: m.TracesRoutes,
+      };
+    });
   });
-});
-const ExceptionsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const ExceptionsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["ExceptionsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.ExceptionsRoutes,
     };
   });
 });
-const IncidentsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const IncidentsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["IncidentsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.IncidentsRoutes,
     };
   });
 });
-const AlertsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
-    return {
-      default: m.AlertsRoutes,
-    };
+const AlertsRoutes: React.LazyExoticComponent<AllRoutesModule["AlertsRoutes"]> =
+  lazy(() => {
+    return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
+      return {
+        default: m.AlertsRoutes,
+      };
+    });
   });
-});
-const ScheduledMaintenanceEventsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const ScheduledMaintenanceEventsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["ScheduledMaintenanceEventsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.ScheduledMaintenanceEventsRoutes,
     };
   });
 });
-const OnCallDutyRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const OnCallDutyRoutes: React.LazyExoticComponent<
+  AllRoutesModule["OnCallDutyRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.OnCallDutyRoutes,
     };
   });
 });
-const MonitorsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const MonitorsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["MonitorsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.MonitorsRoutes,
     };
   });
 });
-const MonitorGroupRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const MonitorGroupRoutes: React.LazyExoticComponent<
+  AllRoutesModule["MonitorGroupRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.MonitorGroupRoutes,
     };
   });
 });
-const WorkflowRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const WorkflowRoutes: React.LazyExoticComponent<
+  AllRoutesModule["WorkflowRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.WorkflowRoutes,
     };
   });
 });
-const StatusPagesRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const StatusPagesRoutes: React.LazyExoticComponent<
+  AllRoutesModule["StatusPagesRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.StatusPagesRoutes,
     };
   });
 });
-const DashboardRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const DashboardRoutes: React.LazyExoticComponent<
+  AllRoutesModule["DashboardRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.DashboardRoutes,
     };
   });
 });
-const ServiceRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const ServiceRoutes: React.LazyExoticComponent<
+  AllRoutesModule["ServiceRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.ServiceRoutes,
     };
   });
 });
-const CodeRepositoryRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const CodeRepositoryRoutes: React.LazyExoticComponent<
+  AllRoutesModule["CodeRepositoryRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.CodeRepositoryRoutes,
     };
   });
 });
-const AIAgentTasksRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const AIAgentTasksRoutes: React.LazyExoticComponent<
+  AllRoutesModule["AIAgentTasksRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.AIAgentTasksRoutes,
     };
   });
 });
-const SettingsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const SettingsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["SettingsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.SettingsRoutes,
     };
   });
 });
-const UserSettingsRoutes = lazy(() => {
-  return import("./Routes/AllRoutes").then((m) => {
+const UserSettingsRoutes: React.LazyExoticComponent<
+  AllRoutesModule["UserSettingsRoutes"]
+> = lazy(() => {
+  return import("./Routes/AllRoutes").then((m: AllRoutesModule) => {
     return {
       default: m.UserSettingsRoutes,
     };
diff --git a/StatusPage/src/App.tsx b/StatusPage/src/App.tsx
index e06952e391..49e56c3604 100644
--- a/StatusPage/src/App.tsx
+++ b/StatusPage/src/App.tsx
@@ -19,132 +19,166 @@ import {
 } from "react-router-dom";
 
 // Lazy load all page components from a single barrel (minimizes chunk count)
-const ForgotPassword = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+type AllPagesModule = typeof import("./Pages/AllPages");
+const ForgotPassword: React.LazyExoticComponent<
+  AllPagesModule["ForgotPassword"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.ForgotPassword,
     };
   });
 });
-const Login = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const Login: React.LazyExoticComponent<AllPagesModule["Login"]> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return { default: m.Login };
   });
 });
-const Logout = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const Logout: React.LazyExoticComponent<AllPagesModule["Logout"]> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return { default: m.Logout };
   });
 });
-const ResetPassword = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const ResetPassword: React.LazyExoticComponent<
+  AllPagesModule["ResetPassword"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return { default: m.ResetPassword };
   });
 });
-const MasterPassword = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const MasterPassword: React.LazyExoticComponent<
+  AllPagesModule["MasterPassword"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.MasterPassword,
     };
   });
 });
-const Sso = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const Sso: React.LazyExoticComponent<AllPagesModule["Sso"]> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return { default: m.Sso };
   });
 });
-const AnnouncementDetail = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const AnnouncementDetail: React.LazyExoticComponent<
+  AllPagesModule["AnnouncementDetail"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.AnnouncementDetail,
     };
   });
 });
-const AnnouncementList = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const AnnouncementList: React.LazyExoticComponent<
+  AllPagesModule["AnnouncementList"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.AnnouncementList,
     };
   });
 });
-const IncidentDetail = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const IncidentDetail: React.LazyExoticComponent<
+  AllPagesModule["IncidentDetail"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.IncidentDetail,
     };
   });
 });
-const IncidentList = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
-    return { default: m.IncidentList };
+const IncidentList: React.LazyExoticComponent<AllPagesModule["IncidentList"]> =
+  lazy(() => {
+    return import("./Pages/AllPages").then((m: AllPagesModule) => {
+      return { default: m.IncidentList };
+    });
   });
-});
-const PageNotFound = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
-    return { default: m.PageNotFound };
+const PageNotFound: React.LazyExoticComponent<AllPagesModule["PageNotFound"]> =
+  lazy(() => {
+    return import("./Pages/AllPages").then((m: AllPagesModule) => {
+      return { default: m.PageNotFound };
+    });
   });
-});
-const Overview = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
-    return { default: m.Overview };
-  });
-});
-const ScheduledEventDetail = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const Overview: React.LazyExoticComponent<AllPagesModule["Overview"]> = lazy(
+  () => {
+    return import("./Pages/AllPages").then((m: AllPagesModule) => {
+      return { default: m.Overview };
+    });
+  },
+);
+const ScheduledEventDetail: React.LazyExoticComponent<
+  AllPagesModule["ScheduledEventDetail"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.ScheduledEventDetail,
     };
   });
 });
-const ScheduledEventList = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const ScheduledEventList: React.LazyExoticComponent<
+  AllPagesModule["ScheduledEventList"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.ScheduledEventList,
     };
   });
 });
-const EmailSubscribe = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const EmailSubscribe: React.LazyExoticComponent<
+  AllPagesModule["EmailSubscribe"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.EmailSubscribe,
     };
   });
 });
-const SMSSubscribe = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
-    return { default: m.SMSSubscribe };
+const SMSSubscribe: React.LazyExoticComponent<AllPagesModule["SMSSubscribe"]> =
+  lazy(() => {
+    return import("./Pages/AllPages").then((m: AllPagesModule) => {
+      return { default: m.SMSSubscribe };
+    });
   });
-});
-const UpdateSubscription = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const UpdateSubscription: React.LazyExoticComponent<
+  AllPagesModule["UpdateSubscription"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.UpdateSubscription,
     };
   });
 });
-const ConfirmSubscription = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const ConfirmSubscription: React.LazyExoticComponent<
+  AllPagesModule["ConfirmSubscription"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.ConfirmSubscription,
     };
   });
 });
-const SlackSubscribe = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const SlackSubscribe: React.LazyExoticComponent<
+  AllPagesModule["SlackSubscribe"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.SlackSubscribe,
     };
   });
 });
-const MicrosoftTeamsSubscribe = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const MicrosoftTeamsSubscribe: React.LazyExoticComponent<
+  AllPagesModule["MicrosoftTeamsSubscribe"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return {
       default: m.MicrosoftTeamsSubscribe,
     };
   });
 });
-const PageForbidden = lazy(() => {
-  return import("./Pages/AllPages").then((m) => {
+const PageForbidden: React.LazyExoticComponent<
+  AllPagesModule["PageForbidden"]
+> = lazy(() => {
+  return import("./Pages/AllPages").then((m: AllPagesModule) => {
     return { default: m.PageForbidden };
   });
 });