From cf5f69271f6d58eaa0fdb739f1b14efde51e8431 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Mon, 13 Mar 2023 13:56:13 -0700 Subject: [PATCH] Lazy load routes --- src-web/components/AppRouter.tsx | 14 +++++++---- src-web/components/Editor/extensions.ts | 6 +++-- src-web/components/HeaderEditor.tsx | 32 ++++++++++--------------- src-web/components/RouteError.tsx | 2 +- src-web/pages/Workspace.tsx | 2 +- src-web/pages/Workspaces.tsx | 2 +- 6 files changed, 29 insertions(+), 29 deletions(-) diff --git a/src-web/components/AppRouter.tsx b/src-web/components/AppRouter.tsx index 1da8c518..3c50531d 100644 --- a/src-web/components/AppRouter.tsx +++ b/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 ( - + + + ); } diff --git a/src-web/components/Editor/extensions.ts b/src-web/components/Editor/extensions.ts index 62e5095b..48f10424 100644 --- a/src-web/components/Editor/extensions.ts +++ b/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), ]; diff --git a/src-web/components/HeaderEditor.tsx b/src-web/components/HeaderEditor.tsx index b6d80a3b..e9c83dd7 100644 --- a/src-web/components/HeaderEditor.tsx +++ b/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; 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)); diff --git a/src-web/components/RouteError.tsx b/src-web/components/RouteError.tsx index b0f4e93d..aada28b1 100644 --- a/src-web/components/RouteError.tsx +++ b/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; diff --git a/src-web/pages/Workspace.tsx b/src-web/pages/Workspace.tsx index b9c7a0ec..57e0726e 100644 --- a/src-web/pages/Workspace.tsx +++ b/src-web/pages/Workspace.tsx @@ -13,7 +13,7 @@ type Params = { requestId?: string; }; -export function Workspace() { +export default function Workspace() { const params = useParams(); const workspaceId = params?.workspaceId ?? ''; const { data: requests } = useRequests(workspaceId); diff --git a/src-web/pages/Workspaces.tsx b/src-web/pages/Workspaces.tsx index 03c7e605..4c5040a5 100644 --- a/src-web/pages/Workspaces.tsx +++ b/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 (