Fix performance related to having 100s of requests (#123)

src-web/components/App.tsx

@@ -13,8 +13,10 @@ const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: false,
-      refetchOnWindowFocus: true,
       networkMode: 'offlineFirst',
+      refetchOnWindowFocus: true,
+      refetchOnReconnect: false,
+      refetchOnMount: false, // Don't refetch when a hook mounts
     },
   },
 });

src-web/components/AppRouter.tsx

@@ -1,6 +1,10 @@
 import { lazy } from 'react';
 import { createBrowserRouter, Navigate, RouterProvider, useParams } from 'react-router-dom';
 import { routePaths, useAppRoutes } from '../hooks/useAppRoutes';
+import { useGenerateThemeCss } from '../hooks/useGenerateThemeCss';
+import { useSyncFontSizeSetting } from '../hooks/useSyncFontSizeSetting';
+import { useSyncModelStores } from '../hooks/useSyncModelStores';
+import { useSyncZoomSetting } from '../hooks/useSyncZoomSetting';
 import { DefaultLayout } from './DefaultLayout';
 import { RedirectToLatestWorkspace } from './RedirectToLatestWorkspace';
 import RouteError from './RouteError';
@@ -50,6 +54,12 @@ const router = createBrowserRouter([
 ]);
 
 export function AppRouter() {
+  // Add some global hooks that should remain persistent
+  useSyncModelStores();
+  useSyncZoomSetting();
+  useSyncFontSizeSetting();
+  useGenerateThemeCss();
+
   return <RouterProvider router={router} />;
 }
 

src-web/components/CookieDialog.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 export const CookieDialog = function ({ cookieJarId }: Props) {
   const updateCookieJar = useUpdateCookieJar(cookieJarId ?? null);
-  const cookieJars = useCookieJars().data ?? [];
+  const cookieJars = useCookieJars();
   const cookieJar = cookieJars.find((c) => c.id === cookieJarId);
 
   if (cookieJar == null) {

src-web/components/CookieDropdown.tsx

@@ -12,7 +12,7 @@ import { InlineCode } from './core/InlineCode';
 import { useDialog } from './DialogContext';
 
 export function CookieDropdown() {
-  const cookieJars = useCookieJars().data ?? [];
+  const cookieJars = useCookieJars();
   const [activeCookieJar, setActiveCookieJarId] = useActiveCookieJar();
   const updateCookieJar = useUpdateCookieJar(activeCookieJar?.id ?? null);
   const deleteCookieJar = useDeleteCookieJar(activeCookieJar ?? null);

src-web/components/DefaultLayout.tsx

@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import { Outlet } from 'react-router-dom';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { DialogProvider, Dialogs } from './DialogContext';
-import { GlobalHooks } from './GlobalHooks';
 import { ToastProvider, Toasts } from './ToastContext';
+import { GlobalHooks } from './GlobalHooks';
 
 export function DefaultLayout() {
   const osInfo = useOsInfo();

src-web/components/GlobalHooks.tsx

@@ -1,50 +1,17 @@
-import { useQueryClient } from '@tanstack/react-query';
 import { emit } from '@tauri-apps/api/event';
-import { getCurrentWebviewWindow } from '@tauri-apps/api/webviewWindow';
-import type { AnyModel } from '@yaakapp-internal/models';
 import type { PromptTextRequest, PromptTextResponse } from '@yaakapp-internal/plugin';
-import { useSetAtom } from 'jotai';
-import { useEffect } from 'react';
-import { useEnsureActiveCookieJar, useMigrateActiveCookieJarId } from '../hooks/useActiveCookieJar';
+import { useEnsureActiveCookieJar } from '../hooks/useActiveCookieJar';
 import { useActiveWorkspaceChangedToast } from '../hooks/useActiveWorkspaceChangedToast';
-import { cookieJarsQueryKey } from '../hooks/useCookieJars';
-import { useCopy } from '../hooks/useCopy';
-import { environmentsAtom } from '../hooks/useEnvironments';
-import { foldersQueryKey } from '../hooks/useFolders';
-import { grpcConnectionsQueryKey } from '../hooks/useGrpcConnections';
-import { grpcEventsQueryKey } from '../hooks/useGrpcEvents';
-import { grpcRequestsAtom } from '../hooks/useGrpcRequests';
 import { useHotKey } from '../hooks/useHotKey';
-import { httpRequestsAtom } from '../hooks/useHttpRequests';
-import { httpResponsesQueryKey } from '../hooks/useHttpResponses';
-import { keyValueQueryKey } from '../hooks/useKeyValue';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
 import { useNotificationToast } from '../hooks/useNotificationToast';
-import { pluginsAtom } from '../hooks/usePlugins';
 import { usePrompt } from '../hooks/usePrompt';
 import { useRecentCookieJars } from '../hooks/useRecentCookieJars';
 import { useRecentEnvironments } from '../hooks/useRecentEnvironments';
 import { useRecentRequests } from '../hooks/useRecentRequests';
 import { useRecentWorkspaces } from '../hooks/useRecentWorkspaces';
-import { useRequestUpdateKey } from '../hooks/useRequestUpdateKey';
-import { settingsAtom, useSettings } from '../hooks/useSettings';
+import { useSyncWorkspaceChildModels } from '../hooks/useSyncWorkspaceChildModels';
 import { useToggleCommandPalette } from '../hooks/useToggleCommandPalette';
-import { workspacesAtom } from '../hooks/useWorkspaces';
-import { useZoom } from '../hooks/useZoom';
-import { extractKeyValue } from '../lib/keyValueStore';
-import { modelsEq } from '../lib/model_util';
-import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin';
-import { githubLight } from '../lib/theme/themes/github';
-import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand';
-import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
-import { rosePineDefault } from '../lib/theme/themes/rose-pine';
-import { yaakDark } from '../lib/theme/themes/yaak';
-import { getThemeCSS } from '../lib/theme/window';
-
-export interface ModelPayload {
-  model: AnyModel;
-  windowLabel: string;
-}
 
 export function GlobalHooks() {
   // Include here so they always update, even if no component references them
@@ -52,136 +19,16 @@ export function GlobalHooks() {
   useRecentEnvironments();
   useRecentCookieJars();
   useRecentRequests();
+  useSyncWorkspaceChildModels();
 
   // Other useful things
   useNotificationToast();
   useActiveWorkspaceChangedToast();
   useEnsureActiveCookieJar();
 
-  // TODO: Remove in future version
-  useMigrateActiveCookieJarId();
-
   const toggleCommandPalette = useToggleCommandPalette();
   useHotKey('command_palette.toggle', toggleCommandPalette);
 
-  const queryClient = useQueryClient();
-  const { wasUpdatedExternally } = useRequestUpdateKey(null);
-
-  const setSettings = useSetAtom(settingsAtom);
-  const setWorkspaces = useSetAtom(workspacesAtom);
-  const setPlugins = useSetAtom(pluginsAtom);
-  const setHttpRequests = useSetAtom(httpRequestsAtom);
-  const setGrpcRequests = useSetAtom(grpcRequestsAtom);
-  const setEnvironments = useSetAtom(environmentsAtom);
-
-  useListenToTauriEvent<ModelPayload>('upserted_model', ({ payload }) => {
-    console.log('Upserted model', payload.model);
-    const { model, windowLabel } = payload;
-    const queryKey =
-      model.model === 'http_response'
-        ? httpResponsesQueryKey(model)
-        : model.model === 'folder'
-          ? foldersQueryKey(model)
-          : model.model === 'grpc_connection'
-            ? grpcConnectionsQueryKey(model)
-            : model.model === 'grpc_event'
-              ? grpcEventsQueryKey(model)
-              : model.model === 'key_value'
-                ? keyValueQueryKey(model)
-                : model.model === 'cookie_jar'
-                  ? cookieJarsQueryKey(model)
-                  : null;
-
-    if (model.model === 'http_request' && windowLabel !== getCurrentWebviewWindow().label) {
-      wasUpdatedExternally(model.id);
-    }
-
-    const pushToFront = (['http_response', 'grpc_connection'] as AnyModel['model'][]).includes(
-      model.model,
-    );
-
-    if (shouldIgnoreModel(model, windowLabel)) return;
-
-    if (model.model === 'workspace') {
-      setWorkspaces(updateModelList(model, pushToFront));
-    } else if (model.model === 'plugin') {
-      setPlugins(updateModelList(model, pushToFront));
-    } else if (model.model === 'http_request') {
-      setHttpRequests(updateModelList(model, pushToFront));
-    } else if (model.model === 'grpc_request') {
-      setGrpcRequests(updateModelList(model, pushToFront));
-    } else if (model.model === 'environment') {
-      setEnvironments(updateModelList(model, pushToFront));
-    } else if (model.model === 'settings') {
-      setSettings(model);
-    } else if (queryKey != null) {
-      // TODO: Convert all models to use Jotai
-      queryClient.setQueryData(queryKey, (current: unknown) => {
-        if (model.model === 'key_value') {
-          // Special-case for KeyValue
-          return extractKeyValue(model);
-        }
-
-        if (Array.isArray(current)) {
-          return updateModelList(model, pushToFront)(current);
-        }
-      });
-    }
-  });
-
-  useListenToTauriEvent<ModelPayload>('deleted_model', ({ payload }) => {
-    const { model, windowLabel } = payload;
-    if (shouldIgnoreModel(model, windowLabel)) return;
-
-    console.log('Delete model', payload.model);
-
-    if (model.model === 'workspace') {
-      setWorkspaces(removeById(model));
-    } else if (model.model === 'plugin') {
-      setPlugins(removeById(model));
-    } else if (model.model === 'http_request') {
-      setHttpRequests(removeById(model));
-    } else if (model.model === 'http_response') {
-      queryClient.setQueryData(httpResponsesQueryKey(model), removeById(model));
-    } else if (model.model === 'folder') {
-      queryClient.setQueryData(foldersQueryKey(model), removeById(model));
-    } else if (model.model === 'environment') {
-      setEnvironments(removeById(model));
-    } else if (model.model === 'grpc_request') {
-      setGrpcRequests(removeById(model));
-    } else if (model.model === 'grpc_connection') {
-      queryClient.setQueryData(grpcConnectionsQueryKey(model), removeById(model));
-    } else if (model.model === 'grpc_event') {
-      queryClient.setQueryData(grpcEventsQueryKey(model), removeById(model));
-    } else if (model.model === 'key_value') {
-      queryClient.setQueryData(keyValueQueryKey(model), undefined);
-    } else if (model.model === 'cookie_jar') {
-      queryClient.setQueryData(cookieJarsQueryKey(model), undefined);
-    }
-  });
-
-  const settings = useSettings();
-  useEffect(() => {
-    if (settings == null) {
-      return;
-    }
-
-    const { interfaceScale, editorFontSize } = settings;
-    getCurrentWebviewWindow().setZoom(interfaceScale).catch(console.error);
-    document.documentElement.style.setProperty('--editor-font-size', `${editorFontSize}px`);
-  }, [settings]);
-
-  // Handle Zoom.
-  // Note, Mac handles it in the app menu, so need to also handle keyboard
-  // shortcuts for Windows/Linux
-  const zoom = useZoom();
-  useHotKey('app.zoom_in', zoom.zoomIn);
-  useListenToTauriEvent('zoom_in', zoom.zoomIn);
-  useHotKey('app.zoom_out', zoom.zoomOut);
-  useListenToTauriEvent('zoom_out', zoom.zoomOut);
-  useHotKey('app.zoom_reset', zoom.zoomReset);
-  useListenToTauriEvent('zoom_reset', zoom.zoomReset);
-
   const prompt = usePrompt();
   useListenToTauriEvent<{ replyId: string; args: PromptTextRequest }>(
     'show_prompt',
@@ -192,46 +39,5 @@ export function GlobalHooks() {
     },
   );
 
-  const copy = useCopy();
-  useListenToTauriEvent('generate_theme_css', () => {
-    const themesCss = [
-      yaakDark,
-      monokaiProDefault,
-      rosePineDefault,
-      catppuccinMacchiato,
-      githubLight,
-      hotdogStandDefault,
-    ]
-      .map(getThemeCSS)
-      .join('\n\n');
-    copy(themesCss);
-  });
-
   return null;
 }
-
-function updateModelList<T extends AnyModel>(model: T, pushToFront: boolean) {
-  return (current: T[]): T[] => {
-    const index = current.findIndex((v) => modelsEq(v, model)) ?? -1;
-    if (index >= 0) {
-      return [...current.slice(0, index), model, ...current.slice(index + 1)];
-    } else {
-      return pushToFront ? [model, ...(current ?? [])] : [...(current ?? []), model];
-    }
-  };
-}
-
-function removeById<T extends { id: string }>(model: T) {
-  return (entries: T[] | undefined) => entries?.filter((e) => e.id !== model.id) ?? [];
-}
-
-const shouldIgnoreModel = (payload: AnyModel, windowLabel: string) => {
-  if (windowLabel === getCurrentWebviewWindow().label) {
-    // Never ignore same-window updates
-    return false;
-  }
-  if (payload.model === 'key_value') {
-    return payload.namespace === 'no_sync';
-  }
-  return false;
-};

src-web/components/GrpcConnectionLayout.tsx

@@ -22,7 +22,7 @@ const emptyArray: string[] = [];
 export function GrpcConnectionLayout({ style }: Props) {
   const activeRequest = useActiveRequest('grpc_request');
   const updateRequest = useUpdateAnyGrpcRequest();
-  const connections = useGrpcConnections(activeRequest?.id ?? null);
+  const connections = useGrpcConnections().filter((c) => c.requestId === activeRequest?.id);
   const activeConnection = connections[0] ?? null;
   const messages = useGrpcEvents(activeConnection?.id ?? null);
   const protoFilesKv = useGrpcProtoFiles(activeRequest?.id ?? null);

src-web/components/Sidebar.tsx

@@ -1,8 +1,10 @@
 import type {
   AnyModel,
   Folder,
+  GrpcConnection,
   GrpcRequest,
   HttpRequest,
+  HttpResponse,
   Workspace,
 } from '@yaakapp-internal/models';
 import classNames from 'classnames';
@@ -22,18 +24,19 @@ import { useDeleteRequest } from '../hooks/useDeleteRequest';
 import { useDuplicateGrpcRequest } from '../hooks/useDuplicateGrpcRequest';
 import { useDuplicateHttpRequest } from '../hooks/useDuplicateHttpRequest';
 import { useFolders } from '../hooks/useFolders';
+import { useGrpcConnections } from '../hooks/useGrpcConnections';
 import { useHotKey } from '../hooks/useHotKey';
+import type { CallableHttpRequestAction } from '../hooks/useHttpRequestActions';
 import { useHttpRequestActions } from '../hooks/useHttpRequestActions';
+import { useHttpResponses } from '../hooks/useHttpResponses';
 import { useKeyValue } from '../hooks/useKeyValue';
-import { useLatestGrpcConnection } from '../hooks/useLatestGrpcConnection';
-import { useLatestHttpResponse } from '../hooks/useLatestHttpResponse';
 import { useMoveToWorkspace } from '../hooks/useMoveToWorkspace';
 import { usePrompt } from '../hooks/usePrompt';
 import { useRenameRequest } from '../hooks/useRenameRequest';
 import { useRequests } from '../hooks/useRequests';
 import { useScrollIntoView } from '../hooks/useScrollIntoView';
 import { useSendAnyHttpRequest } from '../hooks/useSendAnyHttpRequest';
-import { useSendManyRequests } from '../hooks/useSendFolder';
+import { useSendManyRequests } from '../hooks/useSendManyRequests';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useUpdateAnyFolder } from '../hooks/useUpdateAnyFolder';
 import { useUpdateAnyGrpcRequest } from '../hooks/useUpdateAnyGrpcRequest';
@@ -73,6 +76,9 @@ export function Sidebar({ className }: Props) {
   const folders = useFolders();
   const requests = useRequests();
   const activeWorkspace = useActiveWorkspace();
+  const httpRequestActions = useHttpRequestActions();
+  const httpResponses = useHttpResponses();
+  const grpcConnections = useGrpcConnections();
   const duplicateHttpRequest = useDuplicateHttpRequest({
     id: activeRequest?.id ?? null,
     navigateAfter: true,
@@ -453,6 +459,9 @@ export function Sidebar({ className }: Props) {
           selectedId={selectedId}
           selectedTree={selectedTree}
           isCollapsed={isCollapsed}
+          httpRequestActions={httpRequestActions}
+          httpResponses={httpResponses}
+          grpcConnections={grpcConnections}
           tree={tree}
           focused={hasFocus}
           draggingId={draggingId}
@@ -483,6 +492,9 @@ interface SidebarItemsProps {
   handleDragStart: (id: string) => void;
   onSelect: (requestId: string) => void;
   isCollapsed: (id: string) => boolean;
+  httpRequestActions: CallableHttpRequestAction[];
+  httpResponses: HttpResponse[];
+  grpcConnections: GrpcConnection[];
 }
 
 function SidebarItems({
@@ -500,6 +512,9 @@ function SidebarItems({
   handleEnd,
   handleMove,
   handleDragStart,
+  httpRequestActions,
+  httpResponses,
+  grpcConnections,
 }: SidebarItemsProps) {
   return (
     <VStack
@@ -537,6 +552,11 @@ function SidebarItems({
                   />
                 )
               }
+              httpRequestActions={httpRequestActions}
+              latestHttpResponse={httpResponses.find((r) => r.requestId === child.item.id) ?? null}
+              latestGrpcConnection={
+                grpcConnections.find((c) => c.requestId === child.item.id) ?? null
+              }
               onMove={handleMove}
               onEnd={handleEnd}
               onSelect={onSelect}
@@ -549,20 +569,23 @@ function SidebarItems({
                 !isCollapsed(child.item.id) &&
                 draggingId !== child.item.id && (
                   <SidebarItems
-                    treeParentMap={treeParentMap}
-                    tree={child}
-                    isCollapsed={isCollapsed}
-                    draggingId={draggingId}
-                    hoveredTree={hoveredTree}
-                    hoveredIndex={hoveredIndex}
-                    focused={focused}
                     activeId={activeId}
+                    draggingId={draggingId}
+                    focused={focused}
+                    handleDragStart={handleDragStart}
+                    handleEnd={handleEnd}
+                    handleMove={handleMove}
+                    hoveredIndex={hoveredIndex}
+                    hoveredTree={hoveredTree}
+                    httpRequestActions={httpRequestActions}
+                    httpResponses={httpResponses}
+                    grpcConnections={grpcConnections}
+                    isCollapsed={isCollapsed}
+                    onSelect={onSelect}
                     selectedId={selectedId}
                     selectedTree={selectedTree}
-                    onSelect={onSelect}
-                    handleMove={handleMove}
-                    handleEnd={handleEnd}
-                    handleDragStart={handleDragStart}
+                    tree={child}
+                    treeParentMap={treeParentMap}
                   />
                 )}
             </SidebarItem>
@@ -590,7 +613,9 @@ type SidebarItemProps = {
   onDragStart: (id: string) => void;
   children?: ReactNode;
   child: TreeNode;
-} & Pick<SidebarItemsProps, 'isCollapsed' | 'onSelect'>;
+  latestHttpResponse: HttpResponse | null;
+  latestGrpcConnection: GrpcConnection | null;
+} & Pick<SidebarItemsProps, 'isCollapsed' | 'onSelect' | 'httpRequestActions'>;
 
 type DragItem = {
   id: string;
@@ -612,6 +637,9 @@ function SidebarItem({
   selected,
   itemFallbackName,
   useProminentStyles,
+  latestHttpResponse,
+  latestGrpcConnection,
+  httpRequestActions,
   children,
 }: SidebarItemProps) {
   const ref = useRef<HTMLLIElement>(null);
@@ -659,14 +687,9 @@ function SidebarItem({
   const renameRequest = useRenameRequest(itemId);
   const duplicateHttpRequest = useDuplicateHttpRequest({ id: itemId, navigateAfter: true });
   const duplicateGrpcRequest = useDuplicateGrpcRequest({ id: itemId, navigateAfter: true });
-  const httpRequestActions = useHttpRequestActions();
   const sendRequest = useSendAnyHttpRequest();
   const moveToWorkspace = useMoveToWorkspace(itemId);
   const sendManyRequests = useSendManyRequests();
-  const latestHttpResponse = useLatestHttpResponse(itemModel === 'http_request' ? itemId : null);
-  const latestGrpcConnection = useLatestGrpcConnection(
-    itemModel === 'grpc_request' ? itemId : null,
-  );
   const updateHttpRequest = useUpdateAnyHttpRequest();
   const workspaces = useWorkspaces();
   const updateGrpcRequest = useUpdateAnyGrpcRequest();