From c6762532e5ccf86108f4c084f92cddccd15e8cdb Mon Sep 17 00:00:00 2001
From: James Brunton <james@stirlingpdf.com>
Date: Thu, 18 Dec 2025 14:14:33 +0000
Subject: [PATCH] Lazily load settings to reduce chunk size

---
 .../core/components/shared/QuickAccessBar.tsx    | 16 ++++++++++------
 .../shared/config/configNavSections.tsx          |  8 +++++---
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/core/components/shared/QuickAccessBar.tsx b/frontend/src/core/components/shared/QuickAccessBar.tsx
index 3aba740a8..e3c8dd7bc 100644
--- a/frontend/src/core/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/core/components/shared/QuickAccessBar.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useRef, forwardRef, useEffect } from "react";
+import React, { useState, useRef, forwardRef, useEffect, lazy, Suspense } from "react";
 import { Stack, Divider, Menu, Indicator } from "@mantine/core";
 import { useTranslation } from 'react-i18next';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -14,8 +14,10 @@ import '@app/components/shared/quickAccessBar/QuickAccessBar.css';
 import { Tooltip } from '@app/components/shared/Tooltip';
 import AllToolsNavButton from '@app/components/shared/AllToolsNavButton';
 import ActiveToolButton from "@app/components/shared/quickAccessBar/ActiveToolButton";
-import AppConfigModal from '@app/components/shared/AppConfigModal';
 import { useAppConfig } from '@app/contexts/AppConfigContext';
+
+// Lazy-load AppConfigModal
+const AppConfigModal = lazy(() => import('@app/components/shared/AppConfigModal'));
 import { useLicenseAlert } from "@app/hooks/useLicenseAlert";
 import { requestStartTour } from '@app/constants/events';
 import QuickAccessButton from '@app/components/shared/quickAccessBar/QuickAccessButton';
@@ -365,10 +367,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         </div>
       </div>
 
-      <AppConfigModal
-        opened={configModalOpen}
-        onClose={() => setConfigModalOpen(false)}
-      />
+      <Suspense fallback={null}>
+        <AppConfigModal
+          opened={configModalOpen}
+          onClose={() => setConfigModalOpen(false)}
+        />
+      </Suspense>
     </div>
   );
 });
diff --git a/frontend/src/core/components/shared/config/configNavSections.tsx b/frontend/src/core/components/shared/config/configNavSections.tsx
index 7a0bef8c0..d710b5721 100644
--- a/frontend/src/core/components/shared/config/configNavSections.tsx
+++ b/frontend/src/core/components/shared/config/configNavSections.tsx
@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { lazy } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NavKey } from '@app/components/shared/config/types';
-import HotkeysSection from '@app/components/shared/config/configSections/HotkeysSection';
-import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
+
+// Lazy load config sections
+const HotkeysSection = lazy(() => import('@app/components/shared/config/configSections/HotkeysSection'));
+const GeneralSection = lazy(() => import('@app/components/shared/config/configSections/GeneralSection'));
 
 export interface ConfigNavItem {
   key: NavKey;