refactor: lazy load renderer dialogs

src/renderer/src/components/app/AuthenticatedAppShell.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import {
   ArrowUpCircle,
   Database,
@@ -16,12 +16,13 @@ import type {
   UpdateStatus
 } from '../../../../main/types/update.types'
 import type { CurrentUser, Page } from '../../hooks/useAppBootstrap'
-import UpdateDialog from '../UpdateDialog'
 import { Toast } from '../ui/Toast'
 import CleanerPage from '../../pages/CleanerPage'
 import ExtractorPage from '../../pages/ExtractorPage'
 import SettingsPage from '../../pages/SettingsPage'
 
+const UpdateDialog = React.lazy(() => import('../UpdateDialog'))
+
 interface AuthenticatedAppShellProps {
   currentUser: CurrentUser | null
   currentPage: Page
@@ -192,6 +193,7 @@ export function AuthenticatedAppShell({
 
       <Toast />
 
+      <Suspense fallback={null}>
         <UpdateDialog
           isOpen={showUpdateDialog}
           userType={currentUser?.userType ?? null}
@@ -204,6 +206,7 @@ export function AuthenticatedAppShell({
           }
           onRefreshCatalog={onRefreshCatalog}
         />
+      </Suspense>
     </div>
   )
 }

src/renderer/src/pages/CleanerPage.tsx

@@ -1,14 +1,17 @@
-import React from 'react'
+import React, { Suspense } from 'react'
 import { CleanerExecutionBar } from '../components/cleaner/CleanerExecutionBar'
 import { CleanerResultsTable } from '../components/cleaner/CleanerResultsTable'
 import { CleanerSidebar } from '../components/cleaner/CleanerSidebar'
 import { CleanerToolbar } from '../components/cleaner/CleanerToolbar'
-import MaterialTypeManagementDialog from '../components/MaterialTypeManagementDialog'
-import ExecutionReportDialog from '../components/ExecutionReportDialog'
-import ReportViewerDialog from '../components/ReportViewerDialog'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog'
 import { useCleaner } from '../hooks/useCleaner'
 
+const MaterialTypeManagementDialog = React.lazy(
+  () => import('../components/MaterialTypeManagementDialog')
+)
+const ExecutionReportDialog = React.lazy(() => import('../components/ExecutionReportDialog'))
+const ReportViewerDialog = React.lazy(() => import('../components/ReportViewerDialog'))
+
 const CleanerPage: React.FC = () => {
   const typeManagementButtonRef = React.useRef<HTMLButtonElement>(null)
   const executeButtonRef = React.useRef<HTMLButtonElement>(null)
@@ -129,7 +132,7 @@ const CleanerPage: React.FC = () => {
         />
       </div>
 
-      {/* Material Type Management Dialog */}
+      <Suspense fallback={null}>
         <MaterialTypeManagementDialog
           isOpen={isTypeDialogOpen}
           onClose={() => setIsTypeDialogOpen(false)}
@@ -137,8 +140,9 @@ const CleanerPage: React.FC = () => {
           currentUsername={currentUsername}
           triggerRef={typeManagementButtonRef}
         />
+      </Suspense>
 
-      {/* Execution Report Dialog */}
+      <Suspense fallback={null}>
         <ExecutionReportDialog
           isOpen={isReportDialogOpen}
           onClose={() => {
@@ -157,14 +161,16 @@ const CleanerPage: React.FC = () => {
           retriedOrders={reportData?.retriedOrders}
           successfulRetries={reportData?.successfulRetries}
         />
+      </Suspense>
 
-      {/* Report Viewer Dialog */}
+      <Suspense fallback={null}>
         <ReportViewerDialog
           isOpen={isReportViewerOpen}
           onClose={() => setIsReportViewerOpen(false)}
           isAdmin={isAdmin}
           currentUsername={currentUsername}
         />
+      </Suspense>
 
       {/* Confirmation Dialog */}
       {confirmDialog && <ConfirmDialog {...confirmDialog} />}