chore: cache tree view (#7270)

cache-tree

Co-authored-by: GitHub Copilot <Tim Arney>

Author: timarney

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/TreeItem/ExpandableIcon.tsx

@@ -1,17 +1,32 @@
 import { ArrowDownIcon } from "../icons/ArrowDownIcon";
 import { ArrowRightIcon } from "../icons/ArrowRightIcon";
 import { HamburgerIcon } from "../icons/HamburgerIcon";
+import { SpinnerIcon } from "@serverComponents/icons/SpinnerIcon";
+import { useTranslation } from "@i18n/client";
 
 import { ItemProps } from "../types";
 import { useElementType } from "../hooks/useElementType";
 
-export const ExpandableIcon = ({ item }: ItemProps) => {
+export const ExpandableIcon = ({
+  item,
+  isLoading = false,
+}: ItemProps & { isLoading?: boolean }) => {
+  const { t } = useTranslation("form-builder");
   const { isSectionElement, isRepeatingSet } = useElementType(item);
   return (
     <>
       {isSectionElement && (
-        <span className="mr-3 inline-block">
-          {item.isExpanded() ? <ArrowDownIcon /> : <ArrowRightIcon />}
+        <span className="mr-3 inline-flex h-3.5 w-3.5 items-center justify-center">
+          {isLoading ? (
+            <>
+              <SpinnerIcon className="size-3 animate-spin fill-indigo-700 text-slate-200" />
+              <span className="sr-only">{t("loading")}</span>
+            </>
+          ) : item.isExpanded() ? (
+            <ArrowDownIcon />
+          ) : (
+            <ArrowRightIcon />
+          )}
         </span>
       )}
       {isRepeatingSet && (

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/TreeItem/TreeItem.tsx

@@ -1,5 +1,6 @@
 import { cn } from "@lib/utils";
-import React from "react";
+import React, { useEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
 
 import { TreeItemProps } from "../types";
 
@@ -15,16 +16,61 @@ import { lockedItems } from "../constants";
 
 export const TreeItem = ({ item, tree, onFocus, onBlur, handleDelete }: TreeItemProps) => {
   const { isFormElement, isSectionElement, isRepeatingSet } = useElementType(item);
+  const [isOpening, setIsOpening] = useState(false);
+  const openingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const isExpanded = item.isExpanded();
 
   const canDragItem = !lockedItems.includes(item.getId());
 
   const canDeleteItem =
-    item.isExpanded() &&
+    isExpanded &&
     handleDelete &&
     !isFormElement &&
     !isRepeatingSet &&
     !["start", "end"].includes(item.getId());
 
+  const clearOpeningFeedback = () => {
+    if (openingTimeoutRef.current) {
+      clearTimeout(openingTimeoutRef.current);
+      openingTimeoutRef.current = null;
+    }
+
+    setIsOpening(false);
+  };
+
+  const showOpeningFeedback = () => {
+    if (!isSectionElement) {
+      return;
+    }
+
+    if (isExpanded) {
+      clearOpeningFeedback();
+      return;
+    }
+
+    if (openingTimeoutRef.current) {
+      clearTimeout(openingTimeoutRef.current);
+    }
+
+    flushSync(() => {
+      setIsOpening(true);
+    });
+
+    openingTimeoutRef.current = setTimeout(() => {
+      setIsOpening(false);
+      openingTimeoutRef.current = null;
+    }, 1500);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (openingTimeoutRef.current) {
+        clearTimeout(openingTimeoutRef.current);
+      }
+    };
+  }, []);
+
   // Get interactive props only when not renaming
   const getInteractiveProps = () => {
     if (item.isRenaming()) {
@@ -35,6 +81,10 @@ export const TreeItem = ({ item, tree, onFocus, onBlur, handleDelete }: TreeItem
 
     return {
       ...itemProps,
+      onClick: (e: React.MouseEvent<HTMLDivElement>) => {
+        showOpeningFeedback();
+        itemProps.onClick?.(e);
+      },
       onFocus: () => {
         onFocus(item);
       },
@@ -48,30 +98,40 @@ export const TreeItem = ({ item, tree, onFocus, onBlur, handleDelete }: TreeItem
         tree.getItemInstance(item.getId()).startRenaming();
       },
       onKeyDown: async (e: React.KeyboardEvent<HTMLDivElement>) => {
+        if (e.key === "Enter" || e.key === " " || e.key === "ArrowRight") {
+          showOpeningFeedback();
+        }
+
         if (e.key === "Delete" || e.key === "Backspace") {
           if (handleDelete) {
             e.preventDefault();
             handleDelete(e);
+            return;
           }
         }
+
+        itemProps.onKeyDown?.(e);
       },
     };
   };
 
+  const isOpeningFeedback = isOpening && !isExpanded;
+
   return (
     <div
       key={item.getId()}
       id={item.getId()}
+      aria-busy={isOpeningFeedback || undefined}
       {...getInteractiveProps()}
       className={cn(
         "block max-w-full",
         isFormElement && "outline-none",
-        isSectionElement && "outline-offset-[-4px] outline-indigo-700",
+        isSectionElement && "-outline-offset-4 outline-indigo-700",
         item.isDraggingOver() && item.isDragTarget() && "border-blue-focus border-1 border-dashed"
       )}
     >
       <ItemContent item={item}>
-        <ExpandableIcon item={item} />
+        <ExpandableIcon item={item} isLoading={isOpeningFeedback} />
 
         {item.isRenaming() ? <EditableInput item={item} tree={tree} /> : <ItemTitle item={item} />}
 

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/TreeView.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useMemo } from "react";
 import { TreeItemData } from "./types";
 import {
   syncDataLoaderFeature,
@@ -11,7 +11,7 @@ import {
 import { AssistiveTreeDescription, useTree } from "@headless-tree/react";
 import { useTreeHandlers } from "./hooks/useTreeHandlers";
 import { TreeItem } from "./TreeItem/TreeItem";
-import { getInitialTreeState, createSafeItemLoader, createSafeChildrenLoader } from "./treeUtils";
+import { getInitialTreeState, createSafeDataLoader } from "./treeUtils";
 import { useGroupStore } from "@lib/groups/useGroupStore";
 import { ElementProperties, useElementTitle } from "@lib/hooks/useElementTitle";
 import { useTemplateStore } from "@lib/store/useTemplateStore";
@@ -69,6 +69,7 @@ export const HeadlessTreeView = ({ children }: { children?: React.ReactNode }) =
   const { autoFlowAll } = useAutoFlowIfNoCustomRules();
   const { getTitle } = useElementTitle();
   const { headlessTree: headlessTreeRef, startRenamingNewGroup } = useTreeRef();
+  const dataLoader = useMemo(() => createSafeDataLoader(getTreeData), [getTreeData]);
 
   const tree = useTree<TreeItemData>({
     initialState: getInitialTreeState(id ?? "start"),
@@ -142,10 +143,7 @@ export const HeadlessTreeView = ({ children }: { children?: React.ReactNode }) =
       return true;
     },
     indent: 20,
-    dataLoader: {
-      getItem: createSafeItemLoader(getTreeData),
-      getChildren: createSafeChildrenLoader(getTreeData),
-    },
+    dataLoader,
     features: [
       syncDataLoaderFeature,
       selectionFeature,

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/treeUtils.test.ts

@@ -1,4 +1,4 @@
-import { getInitialTreeState } from "./treeUtils";
+import { createSafeDataLoader, getInitialTreeState } from "./treeUtils";
 
 describe("getInitialTreeState", () => {
   it("expands the root item so tree items render on first load", () => {
@@ -14,4 +14,51 @@ describe("getInitialTreeState", () => {
       selectedItems: ["start"],
     });
   });
-});
+});
+
+describe("createSafeDataLoader", () => {
+  const treeData = {
+    root: {
+      data: { type: "root" },
+      children: ["start"],
+    },
+    start: {
+      data: { name: "Start", type: "group" },
+      children: [1],
+    },
+    1: {
+      data: { titleEn: "Question", type: "textField" },
+      children: [],
+    },
+  };
+
+  it("shares one tree data read across item and children lookups in the same task", () => {
+    let calls = 0;
+    const dataLoader = createSafeDataLoader(() => {
+      calls += 1;
+      return treeData;
+    });
+
+    expect(dataLoader.getChildren("root")).toEqual(["start"]);
+    expect(dataLoader.getItem("start")).toEqual({ name: "Start", type: "group" });
+    expect(dataLoader.getChildren("start")).toEqual(["1"]);
+    expect(dataLoader.getItem("1")).toEqual({ titleEn: "Question", type: "textField" });
+    expect(calls).toBe(1);
+  });
+
+  it("refreshes the cached tree data after the current task", async () => {
+    let calls = 0;
+    const dataLoader = createSafeDataLoader(() => {
+      calls += 1;
+      return treeData;
+    });
+
+    dataLoader.getItem("start");
+    expect(calls).toBe(1);
+
+    await Promise.resolve();
+
+    dataLoader.getItem("start");
+    expect(calls).toBe(2);
+  });
+});

app/(gcforms)/[locale]/(form administration)/form-builder/components/shared/right-panel/headless-treeview/treeUtils.ts

@@ -60,12 +60,44 @@ export const getTreeItems = (
   }
 };
 
+const createCachedTreeItemsReader = (getTreeDataFn: GetTreeDataFunction) => {
+  let cachedItems: Record<string, unknown> | null | undefined;
+  let clearScheduled = false;
+
+  return () => {
+    // Headless-tree asks for many items during one expand/render pass. Reuse the
+    // same full tree snapshot for that pass instead of rebuilding it per item.
+    if (cachedItems !== undefined) {
+      return cachedItems;
+    }
+
+    cachedItems = getTreeItems(getTreeDataFn);
+
+    if (!clearScheduled) {
+      clearScheduled = true;
+      // Clear after the current task so later store changes are picked up on the
+      // next interaction without carrying a long-lived stale tree snapshot.
+      queueMicrotask(() => {
+        cachedItems = undefined;
+        clearScheduled = false;
+      });
+    }
+
+    return cachedItems;
+  };
+};
+
+type TreeItemsReader = ReturnType<typeof createCachedTreeItemsReader>;
+
 /**
  * Safe data loader function for tree items - converts react-complex-tree to headless-tree format
  */
-export const createSafeItemLoader = (getTreeDataFn: GetTreeDataFunction) => {
+export const createSafeItemLoader = (
+  getTreeDataFn: GetTreeDataFunction,
+  readTreeItems: TreeItemsReader = createCachedTreeItemsReader(getTreeDataFn)
+) => {
   return (itemId: string): Record<string, unknown> => {
-    const items = getTreeItems(getTreeDataFn);
+    const items = readTreeItems();
 
     // Always ensure we return something, never undefined
     if (!items) {
@@ -88,9 +120,12 @@ export const createSafeItemLoader = (getTreeDataFn: GetTreeDataFunction) => {
 /**
  * Safe children loader function for tree items
  */
-export const createSafeChildrenLoader = (getTreeDataFn: GetTreeDataFunction) => {
+export const createSafeChildrenLoader = (
+  getTreeDataFn: GetTreeDataFunction,
+  readTreeItems: TreeItemsReader = createCachedTreeItemsReader(getTreeDataFn)
+) => {
   return (itemId: string): string[] => {
-    const items = getTreeItems(getTreeDataFn);
+    const items = readTreeItems();
 
     // If items is null/undefined, return empty array
     if (!items) {
@@ -108,3 +143,12 @@ export const createSafeChildrenLoader = (getTreeDataFn: GetTreeDataFunction) =>
     return Array.isArray(children) ? children.map(String) : [];
   };
 };
+
+export const createSafeDataLoader = (getTreeDataFn: GetTreeDataFunction) => {
+  const readTreeItems = createCachedTreeItemsReader(getTreeDataFn);
+
+  return {
+    getItem: createSafeItemLoader(getTreeDataFn, readTreeItems),
+    getChildren: createSafeChildrenLoader(getTreeDataFn, readTreeItems),
+  };
+};

lib/groups/utils/groupsToTreeData.ts

@@ -69,6 +69,7 @@ export const groupsToTreeData = (
 
   const startChildren = [];
   const endChildren = [];
+  const elementsById = new Map(elements.map((element) => [element.id, element]));
 
   for (const [key, value] of Object.entries(formGroups)) {
     const children =
@@ -128,7 +129,7 @@ export const groupsToTreeData = (
     }
 
     children.forEach((childId) => {
-      const element = elements.find((el) => el.id === Number(childId));
+      const element = elementsById.get(Number(childId));
       if (!element) return;
 
       // Build tree data for sub elements if they exist