frontend/aria/hotkey: compute tree only when dialog is visible

Author: haraldschilly

src/packages/frontend/app/hotkey/build-tree.tsx

@@ -9,11 +9,11 @@ import {
   ACCOUNT_MAIN_MENU_ITEMS,
   PREFERENCES_SUB_TABS,
 } from "@cocalc/frontend/account/account-preferences-config";
-import { isIntlMessage, labels } from "@cocalc/frontend/i18n";
-import type { IntlMessage } from "@cocalc/frontend/i18n";
-import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { Icon, IconName } from "@cocalc/frontend/components";
+import AIAvatar from "@cocalc/frontend/components/ai-avatar";
 import { filenameIcon } from "@cocalc/frontend/file-associations";
+import type { IntlMessage } from "@cocalc/frontend/i18n";
+import { isIntlMessage, labels } from "@cocalc/frontend/i18n";
 import type { FixedTab } from "@cocalc/frontend/project/page/file-tab";
 import { FIXED_PROJECT_TABS } from "@cocalc/frontend/project/page/file-tab";
 import { COLORS } from "@cocalc/util/theme";

src/packages/frontend/app/hotkey/dialog.tsx

@@ -19,6 +19,10 @@ import {
 } from "@cocalc/frontend/misc/local-storage";
 import { RenderFrameTree } from "./render-frame-tree";
 import type { AppPageAction, FrameInfo } from "./build-tree";
+import {
+  useActiveFrameData,
+  useEnhancedNavigationTreeData,
+} from "./use-navigation-data";
 import { focusFrameWithRetry } from "./util";
 
 // Extended TreeDataNode with navigation data
@@ -53,11 +57,6 @@ export interface NavigationTreeNode extends TreeDataNode {
 interface QuickNavigationDialogProps {
   visible: boolean;
   onClose: () => void;
-  treeData: NavigationTreeNode[];
-  frameTreeStructure?: any; // Frame tree visualization structure
-  activeFrames?: FrameInfo[]; // Current active frames for keyboard shortcuts
-  activeFileName?: string; // Path to currently open file
-  activeProjectId?: string; // ID of currently active project
 }
 
 /**
@@ -260,13 +259,13 @@ function saveExpandedKeys(
 export const QuickNavigationDialog: React.FC<QuickNavigationDialogProps> = ({
   visible,
   onClose,
-  treeData,
-  frameTreeStructure,
-  activeFrames,
-  activeFileName,
-  activeProjectId,
 }) => {
   const intl = useIntl();
+  // Compute navigation tree data only when dialog is visible
+  // Pass skip=!visible to skip computation when dialog is closed
+  const treeData = useEnhancedNavigationTreeData(!visible);
+  const { frameTreeStructure, activeFrames, activeFileName, activeProjectId } =
+    useActiveFrameData(!visible);
   const searchInputRef = useRef<any>(null);
   const treeContainerRef = useRef<HTMLDivElement>(null);
   const [searchValue, setSearchValue] = useState("");

src/packages/frontend/app/hotkey/use-navigation-data.ts

@@ -8,20 +8,24 @@ declare var DEBUG: boolean;
 import { useMemo } from "react";
 import { useIntl } from "react-intl";
 
+import { switchAccountPage } from "@cocalc/frontend/account/util";
 import {
   redux,
   useActions,
-  useTypedRedux,
   useRedux,
+  useTypedRedux,
 } from "@cocalc/frontend/app-framework";
+import type { EditorSpec } from "@cocalc/frontend/frame-editors/frame-tree/types";
+import { labels } from "@cocalc/frontend/i18n";
+import type { FixedTab } from "@cocalc/frontend/project/page/file-tab";
+import { FIXED_PROJECT_TABS } from "@cocalc/frontend/project/page/file-tab";
 import { useBookmarkedProjects } from "@cocalc/frontend/projects/use-bookmarked-projects";
 import {
+  getRandomColor,
   path_to_tab,
   trunc_middle,
   unreachable,
-  getRandomColor,
 } from "@cocalc/util/misc";
-
 import {
   buildNavigationTree,
   PageInfo,
@@ -32,11 +36,6 @@ import {
   type ProjectInfo,
 } from "./build-tree";
 import type { NavigationTreeNode } from "./dialog";
-import { switchAccountPage } from "@cocalc/frontend/account/util";
-import { labels } from "@cocalc/frontend/i18n";
-import type { EditorSpec } from "@cocalc/frontend/frame-editors/frame-tree/types";
-import type { FixedTab } from "@cocalc/frontend/project/page/file-tab";
-import { FIXED_PROJECT_TABS } from "@cocalc/frontend/project/page/file-tab";
 import {
   ensureFrameFilePath,
   focusFrameWithRetry,
@@ -171,8 +170,12 @@ function extractFramesFromTree(
  * - Current project (prioritized)
  * - All other projects
  * - Account pages (hardcoded, always available)
+ *
+ * @param skip - If true, skip computation and return empty array (used to avoid updates when dialog is closed)
  */
-export function useNavigationTreeData(): NavigationTreeNode[] {
+export function useNavigationTreeData(
+  skip: boolean = false,
+): NavigationTreeNode[] {
   const intl = useIntl();
   const is_logged_in = useTypedRedux("account", "is_logged_in");
   const is_anonymous = useTypedRedux("account", "is_anonymous");
@@ -216,6 +219,10 @@ export function useNavigationTreeData(): NavigationTreeNode[] {
   // This would improve navigation for frequently-used files across all projects,
   // following accessibility best practices for quick navigation dialogs
   const projectsData = useMemo(() => {
+    // Short-circuit if dialog is closed
+    if (skip) {
+      return [];
+    }
     // if (DEBUG) {
     //   console.log("useNavigationTreeData - Building projectsData:", {
     //     openProjectsLength: open_projects?.size,
@@ -339,6 +346,7 @@ export function useNavigationTreeData(): NavigationTreeNode[] {
       })
       .filter((p): p is ProjectInfo => p !== null);
   }, [
+    skip,
     project_map,
     open_projects,
     project_id,
@@ -435,8 +443,10 @@ export function useNavigationTreeData(): NavigationTreeNode[] {
 /**
  * Hook that returns just the frame tree structure and active frames
  * (without the full tree data)
+ *
+ * @param skip - If true, skip computation and return empty values (used to avoid updates when dialog is closed)
  */
-export function useActiveFrameData(): {
+export function useActiveFrameData(skip: boolean = false): {
   frameTreeStructure: FrameTreeStructure | null;
   activeFrames: FrameInfo[];
   activeFileName?: string;
@@ -514,7 +524,8 @@ export function useActiveFrameData(): {
   const activeFrameTree = useRedux(frameTreePath);
 
   const { activeFrames, frameTreeStructure } = useMemo(() => {
-    if (!activeEditorContext.activeFileName || !activeFrameTree) {
+    // Short-circuit if dialog is closed
+    if (skip || !activeEditorContext.activeFileName || !activeFrameTree) {
       return {
         activeFrames: [],
         frameTreeStructure: null,
@@ -549,6 +560,7 @@ export function useActiveFrameData(): {
       frameTreeStructure: result.treeStructure,
     };
   }, [
+    skip,
     activeFrameTree,
     activeEditorContext.activeFileName,
     activeEditorContext.editorSpec,
@@ -567,9 +579,13 @@ export function useActiveFrameData(): {
 /**
  * Hook that adds action handlers to tree nodes
  * Ties navigation to Redux actions and routing
+ *
+ * @param skip - If true, skip computation and return empty array (used to avoid updates when dialog is closed)
  */
-export function useEnhancedNavigationTreeData(): NavigationTreeNode[] {
-  const treeData = useNavigationTreeData();
+export function useEnhancedNavigationTreeData(
+  skip: boolean = false,
+): NavigationTreeNode[] {
+  const treeData = useNavigationTreeData(skip);
   const active_top_tab = useTypedRedux("page", "active_top_tab");
 
   // Get project_id from active_top_tab (same logic as useNavigationTreeData)
@@ -582,6 +598,11 @@ export function useEnhancedNavigationTreeData(): NavigationTreeNode[] {
 
   // Enhance tree nodes with action handlers
   const enhancedTreeData = useMemo(() => {
+    // If we're skipping, treeData will be empty array
+    if (treeData.length === 0) {
+      return [];
+    }
+
     const enhanceNode = (node: NavigationTreeNode): NavigationTreeNode => {
       if (node.navigationData) {
         const navData = node.navigationData;
@@ -720,7 +741,9 @@ export function useEnhancedNavigationTreeData(): NavigationTreeNode[] {
     };
 
     return treeData.map(enhanceNode);
-  }, [treeData, project_id, page_actions]);
+  }, [treeData, project_id, page_actions, skip]);
+
+  console.log("returning", enhancedTreeData);
 
   return enhancedTreeData;
 }

src/packages/frontend/app/page.tsx

@@ -29,8 +29,6 @@ import { Icon } from "@cocalc/frontend/components/icon";
 import {
   GlobalHotkeyDetector,
   QuickNavigationDialog,
-  useActiveFrameData,
-  useEnhancedNavigationTreeData,
 } from "@cocalc/frontend/app/hotkey";
 import Next from "@cocalc/frontend/components/next";
 import { FileUsePage } from "@cocalc/frontend/file-use/page";
@@ -131,9 +129,6 @@ export const Page: React.FC = () => {
   const quick_nav_hotkey_delay =
     other_settings?.get("quick_nav_hotkey_delay") ?? DEFAULT_HOTKEY_DELAY_MS;
   const [quick_nav_visible, setQuickNavVisible] = useState<boolean>(false);
-  const quick_nav_tree_data = useEnhancedNavigationTreeData();
-  const { frameTreeStructure, activeFrames, activeFileName, activeProjectId } =
-    useActiveFrameData();
 
   const accountIsReady = useTypedRedux("account", "is_ready");
   const account_id = useTypedRedux("account", "account_id");
@@ -427,11 +422,6 @@ export const Page: React.FC = () => {
       <QuickNavigationDialog
         visible={quick_nav_visible}
         onClose={() => setQuickNavVisible(false)}
-        treeData={quick_nav_tree_data}
-        frameTreeStructure={frameTreeStructure}
-        activeFrames={activeFrames}
-        activeFileName={activeFileName}
-        activeProjectId={activeProjectId}
       />
     </div>
   );