Lazy load routes

src-web/components/AppRouter.tsx

@@ -1,7 +1,9 @@
-import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import { Workspaces } from '../pages/Workspaces';
-import { Workspace } from '../pages/Workspace';
-import { RouteError } from "./RouteError";
+import { lazy, Suspense } from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+const Workspaces = lazy(() => import('../pages/Workspaces'));
+const Workspace = lazy(() => import('../pages/Workspace'));
+const RouteError = lazy(() => import('./RouteError'));
 
 const router = createBrowserRouter([
   {
@@ -26,6 +28,8 @@ const router = createBrowserRouter([
 
 export function AppRouter() {
   return (
-    <RouterProvider router={router} />
+    <Suspense>
+      <RouterProvider router={router} />
+    </Suspense>
   );
 }

src-web/components/Editor/extensions.ts

@@ -109,8 +109,10 @@ export const baseExtensions = [
   drawSelection(),
   dropCursor(),
   bracketMatching(),
-  debouncedAutocompletionDisplay({ millis: 1000 }),
-  autocompletion({ closeOnBlur: true, interactionDelay: 200, activateOnTyping: false }),
+  // TODO: Figure out how to debounce showing of autocomplete in a good way
+  // debouncedAutocompletionDisplay({ millis: 1000 }),
+  // autocompletion({ closeOnBlur: true, interactionDelay: 200, activateOnTyping: false }),
+  autocompletion({ closeOnBlur: true, interactionDelay: 300 }),
   syntaxHighlighting(myHighlightStyle),
   EditorState.allowMultipleSelections.of(true),
 ];

src-web/components/HeaderEditor.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRequestUpdate } from '../hooks/useRequest';
 import type { HttpHeader, HttpRequest } from '../lib/models';
 import { IconButton } from './IconButton';
@@ -13,13 +13,10 @@ type PairWithId = { header: Partial<HttpHeader>; id: string };
 
 export function HeaderEditor({ request }: Props) {
   const updateRequest = useRequestUpdate(request);
-  const saveHeaders = useCallback(
-    (pairs: PairWithId[]) => {
-      const headers = pairs.map((p) => ({ name: '', value: '', ...p.header }));
-      updateRequest.mutate({ headers });
-    },
-    [updateRequest],
-  );
+  const saveHeaders = (pairs: PairWithId[]) => {
+    const headers = pairs.map((p) => ({ name: '', value: '', ...p.header }));
+    updateRequest.mutate({ headers });
+  };
 
   const newPair = () => {
     return { header: { name: '', value: '' }, id: Math.random().toString() };
@@ -29,16 +26,13 @@ export function HeaderEditor({ request }: Props) {
     request.headers.map((h) => ({ header: h, id: Math.random().toString() })),
   );
 
-  const setPairsAndSave = useCallback(
-    (fn: (pairs: PairWithId[]) => PairWithId[]) => {
-      setPairs((oldPairs) => {
-        const newPairs = fn(oldPairs);
-        saveHeaders(newPairs);
-        return newPairs;
-      });
-    },
-    [saveHeaders],
-  );
+  const setPairsAndSave = (fn: (pairs: PairWithId[]) => PairWithId[]) => {
+    setPairs((oldPairs) => {
+      const newPairs = fn(oldPairs);
+      saveHeaders(newPairs);
+      return newPairs;
+    });
+  };
 
   const handleChangeHeader = (pair: PairWithId) => {
     setPairsAndSave((pairs) =>
@@ -58,7 +52,7 @@ export function HeaderEditor({ request }: Props) {
     if (lastPair.header.name !== '' || lastPair.header.value !== '') {
       setPairsAndSave((pairs) => [...pairs, newPair()]);
     }
-  }, [pairs, setPairsAndSave]);
+  }, [pairs]);
 
   const handleDelete = (pair: PairWithId) => {
     setPairsAndSave((oldPairs) => oldPairs.filter((p) => p.id !== pair.id));

src-web/components/RouteError.tsx

@@ -3,7 +3,7 @@ import { ButtonLink } from './ButtonLink';
 import { Heading } from './Heading';
 import { VStack } from './Stacks';
 
-export function RouteError() {
+export default function RouteError() {
   const error = useRouteError();
   const stringified = JSON.stringify(error);
   const message = (error as any).message ?? stringified;

src-web/pages/Workspace.tsx

@@ -13,7 +13,7 @@ type Params = {
   requestId?: string;
 };
 
-export function Workspace() {
+export default function Workspace() {
   const params = useParams<Params>();
   const workspaceId = params?.workspaceId ?? '';
   const { data: requests } = useRequests(workspaceId);

src-web/pages/Workspaces.tsx

@@ -3,7 +3,7 @@ import { Heading } from '../components/Heading';
 import { VStack } from '../components/Stacks';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 
-export function Workspaces() {
+export default function Workspaces() {
   const workspaces = useWorkspaces();
   return (
     <VStack as="ul" className="p-12">