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,18 +193,20 @@ export function AuthenticatedAppShell({
 
       <Toast />
 
-      <UpdateDialog
+      <Suspense fallback={null}>
-        isOpen={showUpdateDialog}
+        <UpdateDialog
-        userType={currentUser?.userType ?? null}
+          isOpen={showUpdateDialog}
-        status={updateStatus}
+          userType={currentUser?.userType ?? null}
-        catalog={updateCatalog}
+          status={updateStatus}
-        onClose={onCloseUpdateDialog}
+          catalog={updateCatalog}
-        onInstallUserRelease={onInstallUserRelease}
+          onClose={onCloseUpdateDialog}
-        onDownloadAndInstallAdminRelease={async (release) =>
+          onInstallUserRelease={onInstallUserRelease}
-          onDownloadAndInstallAdminRelease(release)
+          onDownloadAndInstallAdminRelease={async (release) =>
-        }
+            onDownloadAndInstallAdminRelease(release)
-        onRefreshCatalog={onRefreshCatalog}
+          }
-      />
+          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,42 +132,45 @@ const CleanerPage: React.FC = () => {
         />
       </div>
 
-      {/* Material Type Management Dialog */}
+      <Suspense fallback={null}>
-      <MaterialTypeManagementDialog
+        <MaterialTypeManagementDialog
-        isOpen={isTypeDialogOpen}
+          isOpen={isTypeDialogOpen}
-        onClose={() => setIsTypeDialogOpen(false)}
+          onClose={() => setIsTypeDialogOpen(false)}
-        isAdmin={isAdmin}
+          isAdmin={isAdmin}
-        currentUsername={currentUsername}
+          currentUsername={currentUsername}
-        triggerRef={typeManagementButtonRef}
+          triggerRef={typeManagementButtonRef}
-      />
+        />
+      </Suspense>
 
-      {/* Execution Report Dialog */}
+      <Suspense fallback={null}>
-      <ExecutionReportDialog
+        <ExecutionReportDialog
-        isOpen={isReportDialogOpen}
+          isOpen={isReportDialogOpen}
-        onClose={() => {
+          onClose={() => {
-          setIsReportDialogOpen(false)
+            setIsReportDialogOpen(false)
-          resetStartTime()
+            resetStartTime()
-        }}
+          }}
-        ordersProcessed={reportData?.ordersProcessed}
+          ordersProcessed={reportData?.ordersProcessed}
-        materialsDeleted={reportData?.materialsDeleted}
+          materialsDeleted={reportData?.materialsDeleted}
-        materialsSkipped={reportData?.materialsSkipped}
+          materialsSkipped={reportData?.materialsSkipped}
-        errors={reportData?.errors}
+          errors={reportData?.errors}
-        dryRun={dryRun}
+          dryRun={dryRun}
-        isExecuting={isExecuting}
+          isExecuting={isExecuting}
-        progress={progress}
+          progress={progress}
-        startTime={startTime}
+          startTime={startTime}
-        triggerRef={executeButtonRef}
+          triggerRef={executeButtonRef}
-        retriedOrders={reportData?.retriedOrders}
+          retriedOrders={reportData?.retriedOrders}
-        successfulRetries={reportData?.successfulRetries}
+          successfulRetries={reportData?.successfulRetries}
-      />
+        />
+      </Suspense>
 
-      {/* Report Viewer Dialog */}
+      <Suspense fallback={null}>
-      <ReportViewerDialog
+        <ReportViewerDialog
-        isOpen={isReportViewerOpen}
+          isOpen={isReportViewerOpen}
-        onClose={() => setIsReportViewerOpen(false)}
+          onClose={() => setIsReportViewerOpen(false)}
-        isAdmin={isAdmin}
+          isAdmin={isAdmin}
-        currentUsername={currentUsername}
+          currentUsername={currentUsername}
-      />
+        />
+      </Suspense>
 
       {/* Confirmation Dialog */}
       {confirmDialog && <ConfirmDialog {...confirmDialog} />}