From 0100a3983d91774ba00ea34c8bbc58051edcc827 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Tue, 24 Sep 2024 11:18:39 -0700
Subject: [PATCH] Code split <Workspace> and <Settings> routes

---
 src-web/components/AppRouter.tsx         | 12 +++++++-----
 src-web/components/Settings/Settings.tsx |  4 ++--
 src-web/main.tsx                         | 11 ++++++-----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src-web/components/AppRouter.tsx b/src-web/components/AppRouter.tsx
index 70f96a4b..d65f75b9 100644
--- a/src-web/components/AppRouter.tsx
+++ b/src-web/components/AppRouter.tsx
@@ -1,10 +1,12 @@
+import { lazy } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
 import { DefaultLayout } from './DefaultLayout';
 import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 import RouteError from './RouteError';
-import { Settings } from './Settings/Settings';
-import Workspace from './Workspace';
+
+const LazyWorkspace = lazy(() => import('./Workspace'));
+const LazySettings = lazy(() => import('./Settings/Settings'));
 
 const router = createBrowserRouter([
   {
@@ -24,14 +26,14 @@ const router = createBrowserRouter([
         path: routePaths.workspace({
           workspaceId: ':workspaceId',
         }),
-        element: <Workspace />,
+        element: <LazyWorkspace />,
       },
       {
         path: routePaths.request({
           workspaceId: ':workspaceId',
           requestId: ':requestId',
         }),
-        element: <Workspace />,
+        element: <LazyWorkspace />,
       },
       {
         path: '/workspaces/:workspaceId/environments/:environmentId/requests/:requestId',
@@ -41,7 +43,7 @@ const router = createBrowserRouter([
         path: routePaths.workspaceSettings({
           workspaceId: ':workspaceId',
         }),
-        element: <Settings />,
+        element: <LazySettings />,
       },
     ],
   },
diff --git a/src-web/components/Settings/Settings.tsx b/src-web/components/Settings/Settings.tsx
index 68b45dc6..8c20d1a8 100644
--- a/src-web/components/Settings/Settings.tsx
+++ b/src-web/components/Settings/Settings.tsx
@@ -20,7 +20,7 @@ enum Tab {
 
 const tabs = [Tab.General, Tab.Appearance, Tab.Plugins];
 
-export const Settings = () => {
+export default function Settings() {
   const osInfo = useOsInfo();
   const [tab, setTab] = useState<string>(Tab.General);
 
@@ -66,4 +66,4 @@ export const Settings = () => {
       </Tabs>
     </div>
   );
-};
+}
diff --git a/src-web/main.tsx b/src-web/main.tsx
index 90190633..b78bd3fd 100644
--- a/src-web/main.tsx
+++ b/src-web/main.tsx
@@ -2,14 +2,15 @@ import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
 import { type } from '@tauri-apps/plugin-os';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
-import { pdfjs } from 'react-pdf';
 import { App } from './components/App';
 import './main.css';
 
-pdfjs.GlobalWorkerOptions.workerSrc = new URL(
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url,
-).toString();
+import('react-pdf').then(({ pdfjs }) => {
+  pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+    'pdfjs-dist/build/pdf.worker.min.mjs',
+    import.meta.url,
+  ).toString();
+});
 
 // Hide decorations here because it doesn't work in Rust for some reason (bug?)
 const osType = type();