Add app routes and upgrade react-router (#5304)

* upgrade to react-router 16.4 * inline loading indicator svg to avoid foc * move app and wrappers to routes folder
2026-04-22 15:18:27 -04:00 · 2022-10-21 11:19:37 +02:00
parent 24fe4ce24a
commit adbea24657
10 changed files with 228 additions and 199 deletions
--- a/packages/insomnia/package-lock.json
+++ b/packages/insomnia/package-lock.json
@@ -137,7 +137,7 @@
 				"react-dom": "^18.2.0",
 				"react-hook-form": "^7.12.1",
 				"react-redux": "^7.2.6",
-				"react-router-dom": "^6.3.0",
+				"react-router-dom": "^6.4.2",
 				"react-stately": "^3.17.0",
 				"react-tabs": "^3.2.3",
 				"react-use": "^17.2.4",
@@ -4810,6 +4810,15 @@
 				"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
 			}
 		},
+		"node_modules/@remix-run/router": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+			"integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==",
+			"dev": true,
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/@repeaterjs/repeater": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz",
@@ -12689,15 +12698,6 @@
 				"node": ">=12.0.0"
 			}
 		},
-		"node_modules/history": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
-			"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-			"dev": true,
-			"dependencies": {
-				"@babel/runtime": "^7.7.6"
-			}
-		},
 		"node_modules/hkdf": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/hkdf/-/hkdf-0.0.2.tgz",
@@ -19094,25 +19094,31 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "6.3.0",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
-			"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+			"integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
 			"dev": true,
 			"dependencies": {
-				"history": "^5.2.0"
+				"@remix-run/router": "1.0.2"
+			},
+			"engines": {
+				"node": ">=14"
 			},
 			"peerDependencies": {
 				"react": ">=16.8"
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "6.3.0",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
-			"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+			"integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
 			"dev": true,
 			"dependencies": {
-				"history": "^5.2.0",
-				"react-router": "6.3.0"
+				"@remix-run/router": "1.0.2",
+				"react-router": "6.4.2"
+			},
+			"engines": {
+				"node": ">=14"
 			},
 			"peerDependencies": {
 				"react": ">=16.8",
@@ -26028,6 +26034,12 @@
 				"@react-types/shared": "^3.14.1"
 			}
 		},
+		"@remix-run/router": {
+			"version": "1.0.2",
+			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.0.2.tgz",
+			"integrity": "sha512-GRSOFhJzjGN+d4sKHTMSvNeUPoZiDHWmRnXfzaxrqe7dE/Nzlc8BiMSJdLDESZlndM7jIUrZ/F4yWqVYlI0rwQ==",
+			"dev": true
+		},
 		"@repeaterjs/repeater": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/@repeaterjs/repeater/-/repeater-3.0.4.tgz",
@@ -32251,15 +32263,6 @@
 			"integrity": "sha512-LKzHqnxr4CrD2YsNoIf/o5nJ09j4yi/GcH5BnYz9UnVpZdS4ucMgvP61TDty5xJcFGRjnH4DpujkS9bHT3hq0Q==",
 			"dev": true
 		},
-		"history": {
-			"version": "5.3.0",
-			"resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
-			"integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.7.6"
-			}
-		},
 		"hkdf": {
 			"version": "0.0.2",
 			"resolved": "https://registry.npmjs.org/hkdf/-/hkdf-0.0.2.tgz",
@@ -37195,22 +37198,22 @@
 			"dev": true
 		},
 		"react-router": {
-			"version": "6.3.0",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.3.0.tgz",
-			"integrity": "sha512-7Wh1DzVQ+tlFjkeo+ujvjSqSJmkt1+8JO+T5xklPlgrh70y7ogx75ODRW0ThWhY7S+6yEDks8TYrtQe/aoboBQ==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.2.tgz",
+			"integrity": "sha512-Rb0BAX9KHhVzT1OKhMvCDMw776aTYM0DtkxqUBP8dNBom3mPXlfNs76JNGK8wKJ1IZEY1+WGj+cvZxHVk/GiKw==",
 			"dev": true,
 			"requires": {
-				"history": "^5.2.0"
+				"@remix-run/router": "1.0.2"
 			}
 		},
 		"react-router-dom": {
-			"version": "6.3.0",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.3.0.tgz",
-			"integrity": "sha512-uaJj7LKytRxZNQV8+RbzJWnJ8K2nPsOOEuX7aQstlMZKQT0164C+X2w6bnkqU3sjtLvpd5ojrezAyfZ1+0sStw==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.4.2.tgz",
+			"integrity": "sha512-yM1kjoTkpfjgczPrcyWrp+OuQMyB1WleICiiGfstnQYo/S8hPEEnVjr/RdmlH6yKK4Tnj1UGXFSa7uwAtmDoLQ==",
 			"dev": true,
 			"requires": {
-				"history": "^5.2.0",
-				"react-router": "6.3.0"
+				"@remix-run/router": "1.0.2",
+				"react-router": "6.4.2"
 			}
 		},
 		"react-stately": {
--- a/packages/insomnia/package.json
+++ b/packages/insomnia/package.json
@@ -193,7 +193,7 @@
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.12.1",
    "react-redux": "^7.2.6",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.4.2",
    "react-stately": "^3.17.0",
    "react-tabs": "^3.2.3",
    "react-use": "^17.2.4",
--- a/packages/insomnia/src/index.html
+++ b/packages/insomnia/src/index.html
@@ -22,7 +22,17 @@
        width: 100%;
      "
    >
-      <img src="./ui/images/insomnia-logo.svg" alt="Insomnia">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
+        <path d="M16 31.1864C24.3873 31.1864 31.1865 24.3872 31.1865 16C31.1865 7.61276 24.3873 0.813559 16 0.813559C7.6128 0.813559 0.813599 7.61276 0.813599 16C0.813599 24.3872 7.6128 31.1864 16 31.1864Z" fill="white"/>
+        <path d="M16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0ZM16 1.62712C23.9379 1.62712 30.3729 8.06208 30.3729 16C30.3729 23.9379 23.9379 30.3729 16 30.3729C8.06208 30.3729 1.62712 23.9379 1.62712 16C1.62712 8.06208 8.06208 1.62712 16 1.62712Z" fill="#4000BF"/>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.1807 4.61017C22.4712 4.61017 27.5706 9.70957 27.5706 16C27.5706 22.2904 22.4712 27.3898 16.1807 27.3898C9.89029 27.3898 4.79089 22.2904 4.79089 16C4.79089 14.4627 5.09547 12.9965 5.64758 11.6584C6.45373 12.7562 7.75377 13.4689 9.22027 13.4689C11.6666 13.4689 13.6496 11.4858 13.6496 9.03955C13.6496 7.57305 12.937 6.27301 11.8391 5.46687C13.1772 4.91475 14.6434 4.61017 16.1807 4.61017Z" fill="url(#paint0_linear)"/>
+        <defs>
+          <linearGradient id="paint0_linear" x1="16.1807" y1="27.3898" x2="16.1807" y2="4.61017" gradientUnits="userSpaceOnUse">
+            <stop stop-color="#7400E1"/>
+            <stop offset="1" stop-color="#4000BF"/>
+          </linearGradient>
+        </defs>
+      </svg>
    </div>
  </div>
  <div id="dropdowns-container" style="
--- a/packages/insomnia/src/ui/components/app-loading-indicator.tsx
+++ b/packages/insomnia/src/ui/components/app-loading-indicator.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+
+export const AppLoadingIndicator = () => (
+  <div
+    id="app-loading-indicator"
+    style={{
+      position: 'fixed',
+      top: '0',
+      left: '0',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '100%',
+      width: '100%',
+    }}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={32}
+      height={32}
+      viewBox="0 0 32 32"
+      fill="none"
+    >
+      <path
+        d="M16 31.186c8.387 0 15.186-6.799 15.186-15.186S24.387.814 16 .814.814 7.613.814 16 7.613 31.186 16 31.186z"
+        fill="#fff"
+      />
+      <path
+        d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm0 1.627c7.938 0 14.373 6.435 14.373 14.373S23.938 30.373 16 30.373 1.627 23.938 1.627 16 8.062 1.627 16 1.627z"
+        fill="#4000BF"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.18 4.61c6.291 0 11.39 5.1 11.39 11.39 0 6.29-5.099 11.39-11.39 11.39-6.29 0-11.39-5.1-11.39-11.39 0-1.537.305-3.004.858-4.342a4.43 4.43 0 106.192-6.192 11.357 11.357 0 014.34-.856z"
+        fill="url(#paint0_linear)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear"
+          x1={16.1807}
+          y1={27.3898}
+          x2={16.1807}
+          y2={4.61017}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#7400E1" />
+          <stop offset={1} stopColor="#4000BF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  </div>
+);
--- a/packages/insomnia/src/ui/index.tsx
+++ b/packages/insomnia/src/ui/index.tsx
@@ -1,21 +1,26 @@
 // eslint-disable-next-line simple-import-sort/imports
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 import './rendererListeners';
-import { getProductName, isDevelopment } from '../common/constants';
+import { ACTIVITY_DEBUG, ACTIVITY_HOME, ACTIVITY_SPEC, ACTIVITY_UNIT_TEST, getProductName, isDevelopment } from '../common/constants';
 import { database } from '../common/database';
 import { initializeLogging } from '../common/log';
 import * as models from '../models';
 import { initNewOAuthSession } from '../network/o-auth-2/misc';
 import { init as initPlugins } from '../plugins';
 import { applyColorScheme } from '../plugins/misc';
-import App from './containers/app';
 import { init as initStore } from './redux/modules';
 import { initializeSentry } from './sentry';
-import { MemoryRouter as Router } from 'react-router-dom';
+import { createMemoryRouter, RouterProvider } from 'react-router-dom';

-import './css/index.less'; // this import must come after `App`.  the reason is not yet known.
+import Root from './routes/root';
+import './css/index.less'; // this import must come after `Root`.
+import { AppLoadingIndicator } from './components/app-loading-indicator';
+const Project = lazy(() => import('./routes/project'));
+const UnitTest = lazy(() => import('./routes/unit-test'));
+const Debug = lazy(() => import('./routes/debug'));
+const Design = lazy(() => import('./routes/design'));

 initializeSentry();
 initializeLogging();
@@ -23,6 +28,51 @@ initializeLogging();
 document.body.setAttribute('data-platform', process.platform);
 document.title = getProductName();

+const router = createMemoryRouter(
+  // @TODO - Investigate file based routing to generate these routes:
+  [
+    {
+      path: '/',
+      element: <Root />,
+      errorElement: <div>Error</div>,
+      children: [
+        {
+          path: ACTIVITY_HOME,
+          element: (
+            <Suspense fallback={<AppLoadingIndicator />}>
+              <Project />
+            </Suspense>
+          ),
+        },
+        {
+          path: ACTIVITY_DEBUG,
+          element: (
+            <Suspense fallback={<AppLoadingIndicator />}>
+              <Debug />
+            </Suspense>
+          ),
+        },
+        {
+          path: ACTIVITY_SPEC,
+          element: (
+            <Suspense fallback={<AppLoadingIndicator />}>
+              <Design />
+            </Suspense>
+          ),
+        },
+        {
+          path: ACTIVITY_UNIT_TEST,
+          element: (
+            <Suspense fallback={<AppLoadingIndicator />}>
+              <UnitTest />
+            </Suspense>
+          ),
+        },
+      ],
+    },
+  ]
+);
+
 async function renderApp() {
  await database.initClient();

@@ -47,10 +97,8 @@ async function renderApp() {

  ReactDOM.createRoot(root).render(
    <Provider store={store}>
-      <Router>
-        <App />
-      </Router>
-    </Provider>,
+      <RouterProvider router={router} />
+    </Provider>
  );
 }

--- a/packages/insomnia/src/ui/components/wrapper-debug.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-debug.tsx
@@ -8,6 +8,28 @@ import { getByParentId as getGrpcRequestMetaByParentId } from '../../models/grpc
 import * as requestOperations from '../../models/helpers/request-operations';
 import { getByParentId as getRequestMetaByParentId } from '../../models/request-meta';
 import { isWebSocketRequest } from '../../models/websocket-request';
+import { EnvironmentsDropdown } from '../components/dropdowns/environments-dropdown';
+import { ErrorBoundary } from '../components/error-boundary';
+import { useDocBodyKeyboardShortcuts } from '../components/keydown-binder';
+import { showModal } from '../components/modals';
+import { AskModal } from '../components/modals/ask-modal';
+import { CookiesModal, showCookiesModal } from '../components/modals/cookies-modal';
+import { GenerateCodeModal } from '../components/modals/generate-code-modal';
+import { PromptModal } from '../components/modals/prompt-modal';
+import { RequestSettingsModal } from '../components/modals/request-settings-modal';
+import { RequestSwitcherModal } from '../components/modals/request-switcher-modal';
+import { WorkspaceEnvironmentsEditModal } from '../components/modals/workspace-environments-edit-modal';
+import { PageLayout } from '../components/page-layout';
+import { GrpcRequestPane } from '../components/panes/grpc-request-pane';
+import { GrpcResponsePane } from '../components/panes/grpc-response-pane';
+import { PlaceholderRequestPane } from '../components/panes/placeholder-request-pane';
+import { RequestPane } from '../components/panes/request-pane';
+import { ResponsePane } from '../components/panes/response-pane';
+import { SidebarChildren } from '../components/sidebar/sidebar-children';
+import { SidebarFilter } from '../components/sidebar/sidebar-filter';
+import { WebSocketRequestPane } from '../components/websockets/websocket-request-pane';
+import { WebSocketResponsePane } from '../components/websockets/websocket-response-pane';
+import { WorkspacePageHeader } from '../components/workspace-page-header';
 import { updateRequestMetaByParentId } from '../hooks/create-request';
 import { createRequestGroup } from '../hooks/create-request-group';
 import {
@@ -18,28 +40,6 @@ import {
  selectSettings,
 } from '../redux/selectors';
 import { selectSidebarFilter } from '../redux/sidebar-selectors';
-import { EnvironmentsDropdown } from './dropdowns/environments-dropdown';
-import { ErrorBoundary } from './error-boundary';
-import { useDocBodyKeyboardShortcuts } from './keydown-binder';
-import { showModal } from './modals';
-import { AskModal } from './modals/ask-modal';
-import { CookiesModal, showCookiesModal } from './modals/cookies-modal';
-import { GenerateCodeModal } from './modals/generate-code-modal';
-import { PromptModal } from './modals/prompt-modal';
-import { RequestSettingsModal } from './modals/request-settings-modal';
-import { RequestSwitcherModal } from './modals/request-switcher-modal';
-import { WorkspaceEnvironmentsEditModal } from './modals/workspace-environments-edit-modal';
-import { PageLayout } from './page-layout';
-import { GrpcRequestPane } from './panes/grpc-request-pane';
-import { GrpcResponsePane } from './panes/grpc-response-pane';
-import { PlaceholderRequestPane } from './panes/placeholder-request-pane';
-import { RequestPane } from './panes/request-pane';
-import { ResponsePane } from './panes/response-pane';
-import { SidebarChildren } from './sidebar/sidebar-children';
-import { SidebarFilter } from './sidebar/sidebar-filter';
-import { WebSocketRequestPane } from './websockets/websocket-request-pane';
-import { WebSocketResponsePane } from './websockets/websocket-response-pane';
-import { WorkspacePageHeader } from './workspace-page-header';

 export const WrapperDebug: FC = () => {
  const activeEnvironment = useSelector(selectActiveEnvironment);
--- a/packages/insomnia/src/ui/components/wrapper-design.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-design.tsx
@@ -9,16 +9,16 @@ import { database } from '../../common/database';
 import { debounce } from '../../common/misc';
 import { initializeSpectral, isLintError } from '../../common/spectral';
 import * as models from '../../models/index';
+import { CodeEditor, UnconnectedCodeEditor } from '../components/codemirror/code-editor';
+import { DesignEmptyState } from '../components/design-empty-state';
+import { ErrorBoundary } from '../components/error-boundary';
+import { Notice, NoticeTable } from '../components/notice-table';
+import { PageLayout } from '../components/page-layout';
+import { SpecEditorSidebar } from '../components/spec-editor/spec-editor-sidebar';
+import { WorkspacePageHeader } from '../components/workspace-page-header';
 import { superFaint } from '../css/css-in-js';
 import { useActiveApiSpecSyncVCSVersion, useGitVCSVersion } from '../hooks/use-vcs-version';
 import { selectActiveApiSpec } from '../redux/selectors';
-import { CodeEditor, UnconnectedCodeEditor } from './codemirror/code-editor';
-import { DesignEmptyState } from './design-empty-state';
-import { ErrorBoundary } from './error-boundary';
-import { Notice, NoticeTable } from './notice-table';
-import { PageLayout } from './page-layout';
-import { SpecEditorSidebar } from './spec-editor/spec-editor-sidebar';
-import { WorkspacePageHeader } from './workspace-page-header';

 const EmptySpaceHelper = styled.div({
  ...superFaint,
--- a/packages/insomnia/src/ui/components/wrapper-home.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-home.tsx
@@ -17,27 +17,27 @@ import { isDesign, Workspace, WorkspaceScopeKeys } from '../../models/workspace'
 import { WorkspaceMeta } from '../../models/workspace-meta';
 import { MemClient } from '../../sync/git/mem-client';
 import { initializeLocalBackendProjectAndMarkForSync } from '../../sync/vcs/initialize-backend-project';
-import { VCS } from '../../sync/vcs/vcs';
+import { AppHeader } from '../components/app-header';
+import { Dropdown } from '../components/base/dropdown/dropdown';
+import { DropdownButton } from '../components/base/dropdown/dropdown-button';
+import { DropdownDivider } from '../components/base/dropdown/dropdown-divider';
+import { DropdownItem } from '../components/base/dropdown/dropdown-item';
+import { DashboardSortDropdown } from '../components/dropdowns/dashboard-sort-dropdown';
+import { ProjectDropdown } from '../components/dropdowns/project-dropdown';
+import { RemoteWorkspacesDropdown } from '../components/dropdowns/remote-workspaces-dropdown';
+import { showPrompt } from '../components/modals';
+import { PageLayout } from '../components/page-layout';
+import { WrapperHomeEmptyStatePane } from '../components/panes/wrapper-home-empty-state-pane';
+import { SvgIcon } from '../components/svg-icon';
+import { Button } from '../components/themed-button';
+import { WorkspaceCard, WorkspaceCardProps } from '../components/workspace-card';
+import { useVCS } from '../hooks/use-vcs';
 import { cloneGitRepository } from '../redux/modules/git';
 import { selectIsLoading, setDashboardSortOrder } from '../redux/modules/global';
 import { ForceToWorkspace } from '../redux/modules/helpers';
 import { importClipBoard, importFile, importUri } from '../redux/modules/import';
 import { activateWorkspace, createWorkspace } from '../redux/modules/workspace';
 import { selectActiveProject, selectApiSpecs, selectDashboardSortOrder, selectIsLoggedIn, selectWorkspaceMetas, selectWorkspacesForActiveProject } from '../redux/selectors';
-import { AppHeader } from './app-header';
-import { Dropdown } from './base/dropdown/dropdown';
-import { DropdownButton } from './base/dropdown/dropdown-button';
-import { DropdownDivider } from './base/dropdown/dropdown-divider';
-import { DropdownItem } from './base/dropdown/dropdown-item';
-import { DashboardSortDropdown } from './dropdowns/dashboard-sort-dropdown';
-import { ProjectDropdown } from './dropdowns/project-dropdown';
-import { RemoteWorkspacesDropdown } from './dropdowns/remote-workspaces-dropdown';
-import { showPrompt } from './modals';
-import { PageLayout } from './page-layout';
-import { WrapperHomeEmptyStatePane } from './panes/wrapper-home-empty-state-pane';
-import { SvgIcon } from './svg-icon';
-import { Button } from './themed-button';
-import { WorkspaceCard, WorkspaceCardProps } from './workspace-card';

 const CreateButton = styled(Button).attrs({
  variant: 'contained',
@@ -54,10 +54,6 @@ const CardContainer = styled.div({
  paddingTop: 'var(--padding-md)',
 });

-interface Props {
-  vcs: VCS | null;
-}
-
 function orderDashboardCards(orderBy: DashboardSortOrder) {
  return (cardA: Pick<WorkspaceCardProps, 'workspace' | 'lastModifiedTimestamp'>, cardB: Pick<WorkspaceCardProps, 'workspace' | 'lastModifiedTimestamp'>) => {
    switch (orderBy) {
@@ -150,7 +146,7 @@ const mapWorkspaceToWorkspaceCard = ({
  };
 };

-const WrapperHome: FC<Props> = (({ vcs }) => {
+const WrapperHome: FC = (() => {
  const sortOrder = useSelector(selectDashboardSortOrder);
  const activeProject = useSelector(selectActiveProject);
  const isLoggedIn = useSelector(selectIsLoggedIn);
@@ -158,7 +154,7 @@ const WrapperHome: FC<Props> = (({ vcs }) => {
  const apiSpecs = useSelector(selectApiSpecs);
  const workspaceMetas = useSelector(selectWorkspaceMetas);
  const workspacesForActiveProject = useSelector(selectWorkspacesForActiveProject);
-
+  const vcs = useVCS({});
  const dispatch = useDispatch();

  const [filter, setFilter] = useState('');
--- a/packages/insomnia/src/ui/containers/app.tsx
+++ b/packages/insomnia/src/ui/containers/app.tsx
@@ -1,12 +1,9 @@
-import React, { FC, Fragment, lazy, Suspense, useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Route, Routes, useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';

 import {
-  ACTIVITY_DEBUG,
  ACTIVITY_HOME,
-  ACTIVITY_SPEC,
-  ACTIVITY_UNIT_TEST,
 } from '../../common/constants';
 import { database as db } from '../../common/database';
 import * as models from '../../models';
@@ -51,6 +48,7 @@ import { WorkspaceEnvironmentsEditModal } from '../components/modals/workspace-e
 import { WorkspaceSettingsModal } from '../components/modals/workspace-settings-modal';
 import { WrapperModal } from '../components/modals/wrapper-modal';
 import { Toast } from '../components/toast';
+import { AppHooks } from '../containers/app-hooks';
 import withDragDropContext from '../context/app/drag-drop-context';
 import { GrpcDispatchModalWrapper, GrpcProvider } from '../context/grpc';
 import { NunjucksEnabledProvider } from '../context/nunjucks/nunjucks-enabled-context';
@@ -69,50 +67,6 @@ import {
  selectIsFinishedBooting,
  selectIsLoggedIn,
 } from '../redux/selectors';
-import { AppHooks } from './app-hooks';
-
-const lazyWithPreload = <T extends FC<any>>(
-  importFn: () => Promise<{ default: T }>
-) => {
-  const LazyComponent = lazy(importFn);
-  const preload = () => importFn();
-
-  return [LazyComponent, preload] as const;
-};
-
-const [WrapperHome, preloadWrapperHome] = lazyWithPreload(
-  () => import('../components/wrapper-home')
-);
-const [WrapperDebug, preloadWrapperDebug] = lazyWithPreload(
-  () => import('../components/wrapper-debug')
-);
-const [WrapperDesign, preloadWrapperDesign] = lazyWithPreload(
-  () => import('../components/wrapper-design')
-);
-const [WrapperUnitTest, preloadWrapperUnitTest] = lazyWithPreload(
-  () => import('../components/wrapper-unit-test')
-);
-
-preloadWrapperHome();
-preloadWrapperDebug();
-preloadWrapperDesign();
-preloadWrapperUnitTest();
-
-const LoadingIndicator = () => (<div
-  id="app-loading-indicator"
-  style={{
-    position: 'fixed',
-    top: '0',
-    left: '0',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '100%',
-    width: '100%',
-  }}
->
-  <img src="./ui/images/insomnia-logo.svg" alt="Insomnia" />
-</div>);

 const ActivityRouter = () => {
  const selectedActivity = useSelector(selectActiveActivity);
@@ -296,42 +250,7 @@ const App = () => {
              </ErrorBoundary>
            </div>

-            <Routes>
-              <Route
-                path="*"
-                element={
-                  <Suspense fallback={<LoadingIndicator />}>
-                    <WrapperHome
-                      vcs={vcs}
-                    />
-                  </Suspense>
-                }
-              />
-              <Route
-                path={ACTIVITY_UNIT_TEST}
-                element={
-                  <Suspense fallback={<LoadingIndicator />}>
-                    <WrapperUnitTest />
-                  </Suspense>
-                }
-              />
-              <Route
-                path={ACTIVITY_SPEC}
-                element={
-                  <Suspense fallback={<LoadingIndicator />}>
-                    <WrapperDesign />
-                  </Suspense>
-                }
-              />
-              <Route
-                path={ACTIVITY_DEBUG}
-                element={
-                  <Suspense fallback={<LoadingIndicator />}>
-                    <WrapperDebug />
-                  </Suspense>
-                }
-              />
-            </Routes>
+            <Outlet />
            <ActivityRouter />
          </ErrorBoundary>

--- a/packages/insomnia/src/ui/components/wrapper-unit-test.tsx
+++ b/packages/insomnia/src/ui/components/wrapper-unit-test.tsx
@@ -13,24 +13,24 @@ import { isRequestGroup } from '../../models/request-group';
 import type { UnitTest } from '../../models/unit-test';
 import type { UnitTestSuite } from '../../models/unit-test-suite';
 import { getSendRequestCallback } from '../../network/unit-test-feature';
+import { Dropdown } from '../components/base/dropdown/dropdown';
+import { DropdownButton } from '../components/base/dropdown/dropdown-button';
+import { DropdownItem } from '../components/base/dropdown/dropdown-item';
+import { Editable } from '../components/base/editable';
+import { CodeEditor } from '../components/codemirror/code-editor';
+import { ErrorBoundary } from '../components/error-boundary';
+import { ListGroup, UnitTestItem, UnitTestResultItem } from '../components/list-group';
+import { showAlert, showModal, showPrompt } from '../components/modals';
+import { SelectModal } from '../components/modals/select-modal';
+import { PageLayout } from '../components/page-layout';
+import { EmptyStatePane } from '../components/panes/empty-state-pane';
+import type { Child } from '../components/sidebar/sidebar-children';
+import { SvgIcon } from '../components/svg-icon';
+import { Button } from '../components/themed-button';
+import { UnitTestEditable } from '../components/unit-test-editable';
+import { WorkspacePageHeader } from '../components/workspace-page-header';
 import { selectActiveEnvironment, selectActiveUnitTestResult, selectActiveUnitTests, selectActiveUnitTestSuite, selectActiveUnitTestSuites, selectActiveWorkspace } from '../redux/selectors';
 import { selectSidebarChildren } from '../redux/sidebar-selectors';
-import { Dropdown } from './base/dropdown/dropdown';
-import { DropdownButton } from './base/dropdown/dropdown-button';
-import { DropdownItem } from './base/dropdown/dropdown-item';
-import { Editable } from './base/editable';
-import { CodeEditor } from './codemirror/code-editor';
-import { ErrorBoundary } from './error-boundary';
-import { ListGroup, UnitTestItem, UnitTestResultItem } from './list-group';
-import { showAlert, showModal, showPrompt } from './modals';
-import { SelectModal } from './modals/select-modal';
-import { PageLayout } from './page-layout';
-import { EmptyStatePane } from './panes/empty-state-pane';
-import type { Child } from './sidebar/sidebar-children';
-import { SvgIcon } from './svg-icon';
-import { Button } from './themed-button';
-import { UnitTestEditable } from './unit-test-editable';
-import { WorkspacePageHeader } from './workspace-page-header';

 const HeaderButton = styled(Button)({
  '&&': {