HUGE sidebar and typing performance improvements (#516)

2026-08-23 20:04:05 +02:00 · 2026-08-13 12:23:56 -07:00
parent b9d4f76193
commit 74d1b5d6ce
16 changed files with 620 additions and 130 deletions
@@ -1,4 +1,9 @@
-import { type GrpcRequest, type HttpRequestHeader, patchModel } from "@yaakapp-internal/models";
+import {
+  type GrpcRequest,
+  type HttpRequestHeader,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
 import { HStack, Icon, useContainerSize, VStack } from "@yaakapp-internal/ui";
 import classNames from "classnames";
 import type { CSSProperties } from "react";
@@ -75,11 +80,13 @@ export function GrpcRequestPane({
  const { width: paneWidth } = useContainerSize(urlContainerEl);

  const handleChangeUrl = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
    [activeRequest],
  );

  const handleChangeMessage = useCallback(
+    // Not debounced: handleSend reads message from the store, so a pending
+    // debounced patch would send stale text
    (message: string) => patchModel(activeRequest, { message }),
    [activeRequest],
  );
@@ -146,12 +153,12 @@ export function GrpcRequestPane({
  );

  const handleMetadataChange = useCallback(
-    (metadata: HttpRequestHeader[]) => patchModel(activeRequest, { metadata }),
+    (metadata: HttpRequestHeader[]) => patchModelDebounced(activeRequest, { metadata }),
    [activeRequest],
  );

  const handleDescriptionChange = useCallback(
-    (description: string) => patchModel(activeRequest, { description }),
+    (description: string) => patchModelDebounced(activeRequest, { description }),
    [activeRequest],
  );

@@ -299,7 +306,7 @@ export function GrpcRequestPane({
              className="font-sans text-xl! px-0!"
              containerClassName="border-0"
              placeholder={resolvedModelName(activeRequest)}
-              onChange={(name) => patchModel(activeRequest, { name })}
+              onChange={(name) => patchModelDebounced(activeRequest, { name })}
            />
            <MarkdownEditor
              name="request-description"
@@ -1,12 +1,11 @@
 import type { HttpRequest } from "@yaakapp-internal/models";
-import { getModel, patchModel } from "@yaakapp-internal/models";
+import { getModel, patchModel, patchModelDebounced } from "@yaakapp-internal/models";
 import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
 import classNames from "classnames";
 import { atom, useAtomValue } from "jotai";
 import type { CSSProperties } from "react";
 import { lazy, Suspense, useCallback, useMemo, useRef, useState } from "react";
-import { activeRequestIdAtom } from "../hooks/useActiveRequestId";
-import { allRequestsAtom } from "../hooks/useAllRequests";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
 import { useHeadersTab } from "../hooks/useHeadersTab";
@@ -16,7 +15,6 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
 import { useSendAnyHttpRequest } from "../hooks/useSendAnyHttpRequest";
-import { deepEqualAtom } from "../lib/atoms";
 import { languageFromContentType } from "../lib/contentType";
 import { generateId } from "../lib/generateId";
 import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
@@ -76,15 +74,12 @@ const TAB_SETTINGS = "settings";
 const TAB_DESCRIPTION = "description";
 const TABS_STORAGE_KEY = "http_request_tabs";

-const nonActiveRequestUrlsAtom = atom((get) => {
-  const activeRequestId = get(activeRequestIdAtom);
-  const requests = get(allRequestsAtom);
-  return requests
-    .filter((r) => r.id !== activeRequestId)
-    .map((r): GenericCompletionOption => ({ type: "constant", label: r.url }));
-});
-
-const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);

 export function HttpRequestPane({ style, fullHeight, className, activeRequest }: Props) {
  const activeRequestId = activeRequest.id;
@@ -286,16 +281,16 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
  const { mutate: importCurl } = useImportCurl();

  const handleBodyChange = useCallback(
-    (body: HttpRequest["body"]) => patchModel(activeRequest, { body }),
+    (body: HttpRequest["body"]) => patchModelDebounced(activeRequest, { body }),
    [activeRequest],
  );

  const handleBodyTextChange = useCallback(
-    (text: string) => patchModel(activeRequest, { body: { ...activeRequest.body, text } }),
+    (text: string) => patchModelDebounced(activeRequest, { body: { ...activeRequest.body, text } }),
    [activeRequest],
  );

-  const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);

  const autocomplete: GenericCompletionConfig = useMemo(
    () => getUrlCompletionConfig(autocompleteUrls),
@@ -335,7 +330,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
  );

  const handleUrlChange = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
    [activeRequest],
  );

@@ -381,7 +376,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                forceUpdateKey={`${forceUpdateHeaderEditorKey}::${forceUpdateKey}`}
                headers={activeRequest.headers}
                stateKey={`headers.${activeRequest.id}`}
-                onChange={(headers) => patchModel(activeRequest, { headers })}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
              />
            </TabContent>
            <TabContent value={TAB_PARAMS}>
@@ -389,7 +384,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                stateKey={`params.${activeRequest.id}`}
                forceUpdateKey={forceUpdateKey + urlParametersKey}
                pairs={urlParameterPairs}
-                onChange={(urlParameters) => patchModel(activeRequest, { urlParameters })}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
              />
            </TabContent>
            <TabContent value={TAB_SETTINGS}>
@@ -441,7 +436,7 @@ export function HttpRequestPane({ style, fullHeight, className, activeRequest }:
                    requestId={activeRequest.id}
                    contentType={contentType}
                    body={activeRequest.body}
-                    onChange={(body) => patchModel(activeRequest, { body })}
+                    onChange={(body) => patchModelDebounced(activeRequest, { body })}
                    onChangeContentType={handleContentTypeChange}
                  />
                ) : typeof activeRequest.bodyType === "string" ? (
@@ -112,6 +112,7 @@ function Sidebar({ className }: { className?: string }) {
  const treeId = `tree.${activeWorkspaceId ?? "unknown"}`;
  const filterText = useAtomValue(sidebarFilterAtom);
  const [tree, allFields, emptyFilterSuggestions] = useAtomValue(sidebarTreeAtom) ?? [];
+
  const wrapperRef = useRef<HTMLElement>(null);
  const treeRef = useRef<TreeHandle>(null);
  const filterRef = useRef<InputHandle>(null);
@@ -724,7 +725,11 @@ function Sidebar({ className }: { className?: string }) {
  );
 }

-export default Sidebar;
+// Memoized so route navigations (which re-render the workspace layout) don't
+// re-render the sidebar subtree. In large workspaces a sidebar re-render is
+// very expensive: it re-renders DndContext, whose context churn re-renders
+// every visible TreeItem regardless of their memo comparators.
+export default memo(Sidebar);

 function getGitContextMenuItems({
  items,
@@ -1,5 +1,10 @@
 import type { WebsocketRequest } from "@yaakapp-internal/models";
-import { getModel, patchModel } from "@yaakapp-internal/models";
+import {
+  flushAllModelWrites,
+  getModel,
+  patchModel,
+  patchModelDebounced,
+} from "@yaakapp-internal/models";
 import type { GenericCompletionOption } from "@yaakapp-internal/plugins";
 import { closeWebsocket, connectWebsocket, sendWebsocket } from "@yaakapp-internal/ws";
 import classNames from "classnames";
@@ -8,8 +13,7 @@ import type { CSSProperties } from "react";
 import { useCallback, useMemo, useRef } from "react";
 import { getActiveCookieJar } from "../hooks/useActiveCookieJar";
 import { getActiveEnvironment } from "../hooks/useActiveEnvironment";
-import { activeRequestIdAtom } from "../hooks/useActiveRequestId";
-import { allRequestsAtom } from "../hooks/useAllRequests";
+import { allRequestUrlsAtom } from "../hooks/useAllRequests";
 import { useAuthTab } from "../hooks/useAuthTab";
 import { useCancelHttpResponse } from "../hooks/useCancelHttpResponse";
 import { useHeadersTab } from "../hooks/useHeadersTab";
@@ -18,7 +22,6 @@ import { usePinnedHttpResponse } from "../hooks/usePinnedHttpResponse";
 import { activeWebsocketConnectionAtom } from "../hooks/usePinnedWebsocketConnection";
 import { useRequestEditor, useRequestEditorEvent } from "../hooks/useRequestEditor";
 import { useRequestUpdateKey } from "../hooks/useRequestUpdateKey";
-import { deepEqualAtom } from "../lib/atoms";
 import { languageFromContentType } from "../lib/contentType";
 import { derivePathPlaceholderPairs, renamePathPlaceholder } from "../lib/pathPlaceholders";
 import { prepareImportQuerystring } from "../lib/prepareImportQuerystring";
@@ -53,15 +56,12 @@ const TAB_SETTINGS = "settings";
 const TAB_DESCRIPTION = "description";
 const TABS_STORAGE_KEY = "websocket_request_tabs";

-const nonActiveRequestUrlsAtom = atom((get) => {
-  const activeRequestId = get(activeRequestIdAtom);
-  const requests = get(allRequestsAtom);
-  return requests
-    .filter((r) => r.id !== activeRequestId)
-    .map((r): GenericCompletionOption => ({ type: "constant", label: r.url }));
-});
-
-const memoNotActiveRequestUrlsAtom = deepEqualAtom(nonActiveRequestUrlsAtom);
+// Derived from the identity-stable URL list so this only recomputes when a URL
+// actually changes. The active request's own URL is included, but exact matches
+// are filtered out at completion time by genericCompletion.
+const requestUrlOptionsAtom = atom((get): GenericCompletionOption[] =>
+  get(allRequestUrlsAtom).map((url) => ({ type: "constant", label: url })),
+);

 export function WebsocketRequestPane({ style, fullHeight, className, activeRequest }: Props) {
  const activeRequestId = activeRequest.id;
@@ -139,7 +139,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
  const { mutate: cancelResponse } = useCancelHttpResponse(activeResponse?.id ?? null);
  const connection = useAtomValue(activeWebsocketConnectionAtom);

-  const autocompleteUrls = useAtomValue(memoNotActiveRequestUrlsAtom);
+  const autocompleteUrls = useAtomValue(requestUrlOptionsAtom);

  const autocomplete: GenericCompletionConfig = useMemo(
    () => getUrlCompletionConfig(autocompleteUrls),
@@ -147,6 +147,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
  );

  const handleConnect = useCallback(async () => {
+    await flushAllModelWrites(); // The backend reads the request from the DB
    await connectWebsocket({
      requestId: activeRequest.id,
      environmentId: getActiveEnvironment()?.id ?? null,
@@ -156,6 +157,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque

  const handleSend = useCallback(async () => {
    if (connection == null) return;
+    await flushAllModelWrites(); // The backend reads the message from the DB
    await sendWebsocket({
      connectionId: connection?.id,
      environmentId: getActiveEnvironment()?.id ?? null,
@@ -168,7 +170,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
  }, [connection]);

  const handleUrlChange = useCallback(
-    (url: string) => patchModel(activeRequest, { url }),
+    (url: string) => patchModelDebounced(activeRequest, { url }),
    [activeRequest],
  );

@@ -252,7 +254,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                forceUpdateKey={forceUpdateKey}
                headers={activeRequest.headers}
                stateKey={`headers.${activeRequest.id}`}
-                onChange={(headers) => patchModel(activeRequest, { headers })}
+                onChange={(headers) => patchModelDebounced(activeRequest, { headers })}
              />
            </TabContent>
            <TabContent value={TAB_PARAMS}>
@@ -260,7 +262,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                stateKey={`params.${activeRequest.id}`}
                forceUpdateKey={forceUpdateKey + urlParametersKey}
                pairs={urlParameterPairs}
-                onChange={(urlParameters) => patchModel(activeRequest, { urlParameters })}
+                onChange={(urlParameters) => patchModelDebounced(activeRequest, { urlParameters })}
              />
            </TabContent>
            <TabContent value={TAB_MESSAGE}>
@@ -272,7 +274,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                heightMode={fullHeight ? "full" : "auto"}
                defaultValue={activeRequest.message}
                language={messageLanguage}
-                onChange={(message) => patchModel(activeRequest, { message })}
+                onChange={(message) => patchModelDebounced(activeRequest, { message })}
                stateKey={`json.${activeRequest.id}`}
              />
            </TabContent>
@@ -289,7 +291,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                  className="font-sans text-xl! px-0!"
                  containerClassName="border-0"
                  placeholder={resolvedModelName(activeRequest)}
-                  onChange={(name) => patchModel(activeRequest, { name })}
+                  onChange={(name) => patchModelDebounced(activeRequest, { name })}
                />
                <MarkdownEditor
                  name="request-description"
@@ -297,7 +299,7 @@ export function WebsocketRequestPane({ style, fullHeight, className, activeReque
                  defaultValue={activeRequest.description}
                  stateKey={`description.${activeRequest.id}`}
                  forceUpdateKey={forceUpdateKey}
-                  onChange={(description) => patchModel(activeRequest, { description })}
+                  onChange={(description) => patchModelDebounced(activeRequest, { description })}
                />
              </div>
            </TabContent>
@@ -8,6 +8,7 @@ import { emacs } from "@replit/codemirror-emacs";
 import { vim } from "@replit/codemirror-vim";

 import { vscodeKeymap } from "@replit/codemirror-vscode-keymap";
+import { debounce } from "@yaakapp-internal/lib";
 import type { EditorKeymap } from "@yaakapp-internal/models";
 import { settingsAtom } from "@yaakapp-internal/models";
 import type { EditorLanguage, TemplateFunction } from "@yaakapp-internal/plugins";
@@ -381,6 +382,7 @@ function EditorInner({
  const initEditorRef = useCallback(
    function initEditorRef(container: HTMLDivElement | null) {
      if (container === null) {
+        flushCachedEditorState(stateKey);
        cm.current?.view.destroy();
        cm.current = null;
        return;
@@ -639,7 +641,7 @@ function getExtensions({
        onChange.current?.(update.state.doc.toString());
      }

-      saveCachedEditorState(stateKey, update.state);
+      saveCachedEditorStateDebounced(stateKey, update.state);
    }),
  ];
 }
@@ -652,6 +654,44 @@ const placeholderElFromText = (text: string | undefined) => {
  return el;
 };

+// Caching the state is too expensive to do on every update (every keystroke and cursor move),
+// so debounce it per state key and flush when the editor unmounts.
+//
+// The cost scales with the document, and every update pays it in full:
+//   - `state.toJSON` flattens the whole rope into a string, ~0.13 ms per 200 KB
+//   - the fingerprint is an exact md5 for editable documents, ~0.3 ms per 200 KB. `docFingerprint`
+//     only samples read-only ones, so editing a large body still hashes all of it
+//   - `sessionStorage.setItem` is synchronous and blocks the main thread
+// Typing in a 200 KB body costs ~0.4 ms per keystroke before the storage write, and a 1 MB one
+// ~2.3 ms. Read-only documents skip most of the hashing but still serialize, which is the larger
+// half once documents get into the megabytes.
+const SAVE_STATE_DEBOUNCE_MS = 500;
+const stateSavers = new Map<string, ReturnType<typeof debounce>>();
+
+function saveCachedEditorStateDebounced(stateKey: string | null, state: EditorState) {
+  if (!stateKey) return;
+  let saver = stateSavers.get(stateKey);
+  if (saver == null) {
+    saver = debounce(
+      (s: EditorState) => saveCachedEditorState(stateKey, s),
+      SAVE_STATE_DEBOUNCE_MS,
+    );
+    stateSavers.set(stateKey, saver);
+  }
+  saver(state);
+}
+
+// NOTE: Only called when an editor unmounts, so the saver is dropped rather than left in the map
+//  for every state key the session has ever shown. A pending saver holds the last EditorState,
+//  which holds the whole document.
+function flushCachedEditorState(stateKey: string | null) {
+  if (!stateKey) return;
+  const saver = stateSavers.get(stateKey);
+  if (saver == null) return;
+  saver.flush();
+  stateSavers.delete(stateKey);
+}
+
 function saveCachedEditorState(stateKey: string | null, state: EditorState | null) {
  if (!stateKey || state == null) return;
  const stateObj = state.toJSON(stateFields);
@@ -4,6 +4,7 @@ import {
  websocketRequestsAtom,
 } from "@yaakapp-internal/models";
 import { atom, useAtomValue } from "jotai";
+import { selectAtom } from "jotai/utils";

 export const allRequestsAtom = atom((get) => [
  ...get(httpRequestsAtom),
@@ -14,3 +15,26 @@ export const allRequestsAtom = atom((get) => [
 export function useAllRequests() {
  return useAtomValue(allRequestsAtom);
 }
+
+const stringArrayEqual = (a: string[], b: string[]) =>
+  a.length === b.length && a.every((v, i) => v === b[i]);
+
+// Identity-stable derivations so subscribers don't recompute or re-render when
+// unrelated request fields change (eg. every debounced edit of a request)
+export const allRequestIdsAtom = selectAtom(
+  allRequestsAtom,
+  (requests) => requests.map((r) => r.id),
+  stringArrayEqual,
+);
+
+export const allRequestUrlsAtom = selectAtom(
+  allRequestsAtom,
+  (requests) => {
+    const urls = new Set<string>();
+    for (const r of requests) {
+      if (r.url) urls.add(r.url);
+    }
+    return Array.from(urls);
+  },
+  stringArrayEqual,
+);
@@ -1,6 +1,7 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { emit } from "@tauri-apps/api/event";
 import type { GrpcConnection, GrpcRequest } from "@yaakapp-internal/models";
+import { flushAllModelWrites } from "@yaakapp-internal/models";
 import { jotaiStore } from "../lib/jotai";
 import { minPromiseMillis } from "../lib/minPromiseMillis";
 import { invokeCmd } from "../lib/tauri";
@@ -22,8 +23,14 @@ export function useGrpc(

  const go = useMutation<void, string>({
    mutationKey: ["grpc_go", conn?.id],
-    mutationFn: () =>
-      invokeCmd<void>("cmd_grpc_go", { requestId, environmentId: environment?.id, protoFiles }),
+    mutationFn: async () => {
+      await flushAllModelWrites(); // The backend reads the request from the DB
+      return invokeCmd<void>("cmd_grpc_go", {
+        requestId,
+        environmentId: environment?.id,
+        protoFiles,
+      });
+    },
  });

  const send = useMutation({
@@ -6,21 +6,19 @@ import { useMemo } from "react";
 export function useParentFolders(m: Folder | HttpRequest | GrpcRequest | WebsocketRequest | null) {
  const folders = useAtomValue(foldersAtom);

-  return useMemo(() => getParentFolders(folders, m), [folders, m]);
+  // Key on folderId, not the model itself, so edits to the model (eg. every URL
+  // keystroke replacing the active request) don't produce a new array identity
+  const folderId = m?.folderId ?? null;
+  return useMemo(() => getParentFolders(folders, folderId), [folders, folderId]);
 }

-function getParentFolders(
-  folders: Folder[],
-  currentModel: Folder | HttpRequest | GrpcRequest | WebsocketRequest | null,
-): Folder[] {
-  if (currentModel == null) return [];
+function getParentFolders(folders: Folder[], folderId: string | null): Folder[] {
+  if (folderId == null) return [];

-  const parentFolder = currentModel.folderId
-    ? folders.find((f) => f.id === currentModel.folderId)
-    : null;
+  const parentFolder = folders.find((f) => f.id === folderId);
  if (parentFolder == null) {
    return [];
  }

-  return [parentFolder, ...getParentFolders(folders, parentFolder)];
+  return [parentFolder, ...getParentFolders(folders, parentFolder.folderId ?? null)];
 }
@@ -30,7 +30,7 @@
    "@shopify/lang-jsonc": "^1.0.1",
    "@tanstack/react-query": "^5.90.5",
    "@tanstack/react-router": "^1.133.13",
-    "@tanstack/react-virtual": "^3.13.12",
+    "@tanstack/react-virtual": "^3.14.9",
    "@tauri-apps/api": "^2.11.0",
    "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
    "@tauri-apps/plugin-dialog": "^2.7.1",