From 2a0df81c5950fbab14965135900a16417fdec10c Mon Sep 17 00:00:00 2001
From: Nick Sandstrom <32273437+nick4810@users.noreply.github.com>
Date: Wed, 17 Dec 2025 13:35:12 -0800
Subject: [PATCH] Lazy loading components

---
 frontend/src/pages/DVR.jsx   | 49 ++++++++++++++++++++----------------
 frontend/src/pages/Login.jsx | 14 ++++++++---
 2 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/DVR.jsx b/frontend/src/pages/DVR.jsx
index 711c9ba1..8e39cf2c 100644
--- a/frontend/src/pages/DVR.jsx
+++ b/frontend/src/pages/DVR.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, lazy, Suspense } from 'react';
 import {
   Box,
   Button,
@@ -20,11 +20,12 @@ import RecordingForm from '../components/forms/Recording';
 import {
   useTimeHelpers,
 } from '../utils/dateTimeUtils.js';
-import { RecordingDetailsModal } from '../components/forms/RecordingDetailsModal.jsx';
-import { RecurringRuleModal } from '../components/forms/RecurringRuleModal.jsx';
-import { RecordingCard } from '../components/cards/RecordingCard.jsx';
+const RecordingDetailsModal = lazy(() => import('../components/forms/RecordingDetailsModal'));
+import RecurringRuleModal from '../components/forms/RecurringRuleModal.jsx';
+import RecordingCard from '../components/cards/RecordingCard.jsx';
 import { categorizeRecordings } from '../utils/pages/DVRUtils.js';
 import { getPosterUrl } from '../utils/cards/RecordingCardUtils.js';
+import ErrorBoundary from '../components/ErrorBoundary.jsx';
 
 const DVRPage = () => {
   const theme = useMantineTheme();
@@ -253,24 +254,28 @@ const DVRPage = () => {
 
       {/* Details Modal */}
       {detailsRecording && (
-        <RecordingDetailsModal
-          opened={detailsOpen}
-          onClose={closeDetails}
-          recording={detailsRecording}
-          channel={channels[detailsRecording.channel]}
-          posterUrl={getPosterUrl(
-              detailsRecording.custom_properties?.poster_logo_id,
-              detailsRecording.custom_properties,
-              channels[detailsRecording.channel]?.logo?.cache_url
-          )}
-          env_mode={useSettingsStore.getState().environment.env_mode}
-          onWatchLive={handleOnWatchLive}
-          onWatchRecording={handleOnWatchRecording}
-          onEdit={(rec) => {
-            setEditRecording(rec);
-            closeDetails();
-          }}
-        />
+        <ErrorBoundary>
+          <Suspense fallback={<Text>Loading...</Text>}>
+            <RecordingDetailsModal
+              opened={detailsOpen}
+              onClose={closeDetails}
+              recording={detailsRecording}
+              channel={channels[detailsRecording.channel]}
+              posterUrl={getPosterUrl(
+                detailsRecording.custom_properties?.poster_logo_id,
+                detailsRecording.custom_properties,
+                channels[detailsRecording.channel]?.logo?.cache_url
+              )}
+              env_mode={useSettingsStore.getState().environment.env_mode}
+              onWatchLive={handleOnWatchLive}
+              onWatchRecording={handleOnWatchRecording}
+              onEdit={(rec) => {
+                setEditRecording(rec);
+                closeDetails();
+              }}
+            />
+          </Suspense>
+        </ErrorBoundary>
       )}
     </Box>
   );
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
index 262d4c35..3c2cf869 100644
--- a/frontend/src/pages/Login.jsx
+++ b/frontend/src/pages/Login.jsx
@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import LoginForm from '../components/forms/LoginForm';
-import SuperuserForm from '../components/forms/SuperuserForm';
+const SuperuserForm = lazy(() => import('../components/forms/SuperuserForm'));
 import useAuthStore from '../store/auth';
+import ErrorBoundary from '../components/ErrorBoundary.jsx';
+import { Text } from '@mantine/core';
 
 const Login = ({}) => {
   const superuserExists = useAuthStore((s) => s.superuserExists);
 
   if (!superuserExists) {
-    return <SuperuserForm />;
+    return (
+      <ErrorBoundary>
+        <Suspense fallback={<Text>Loading...</Text>}>
+          <SuperuserForm />
+        </Suspense>
+      </ErrorBoundary>
+    );
   }
 
   return <LoginForm />;