@anchrd/intel-ui 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/data/intel-data-provider/intel-data-provider.ts

@@ -45,6 +45,10 @@ const DeleteResult = z.strictObject({ deleted: z.boolean() });
 // Attachment uploads and downloads share this budget, so it is generous rather than snappy.
 const RequestTimeoutMs = 60_000;
 
+// Deeper nesting than this is not a tree anyone navigates; the limit exists to bound the request
+// fan-out on first paint, not to express a product rule.
+const MaxTreeDepth = 12;
+
 // The Worker serves the login route, so the path belongs to the data layer rather than to any view.
 export function loginPath(returnTo?: string): string {
   return returnTo ? `/auth/login?returnTo=${encodeURIComponent(returnTo)}` : "/auth/login";
@@ -111,12 +115,23 @@ export function createIntelDataProvider(
     return await request(`/knowledge?${params}`, KnowledgeNodeList);
   }
 
-  async function loadChildren(parentId: string | null): Promise<KnowledgeTreeNode[]> {
+  // One request per folder, so a deep tree is an N+1 on the first paint. The depth limit bounds that
+  // and, more importantly, makes a cyclic parentId impossible to hang on: without it a cycle would
+  // recurse until the tab dies. `seen` stops a cycle at the first repeat rather than at the limit.
+  async function loadChildren(
+    parentId: string | null,
+    depth = 0,
+    seen: ReadonlySet<string> = new Set(),
+  ): Promise<KnowledgeTreeNode[]> {
+    if (depth >= MaxTreeDepth) return [];
     const { items } = await listKnowledge({ parentId });
     return await Promise.all(
       items.map(async (node) => ({
         ...node,
-        children: node.kind === "folder" ? await loadChildren(node.id) : [],
+        children:
+          node.kind === "folder" && !seen.has(node.id)
+            ? await loadChildren(node.id, depth + 1, new Set([...seen, node.id]))
+            : [],
       })),
     );
   }