feat: loadingCheckPropagationItems state

Author: lukasbach

.changeset/neat-avocados-explain.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": patch
+---
+
+Added new state variable `loadingCheckPropagationItems` to indicate if, in async trees with checkboxes and state propagation enabled, data loading operations are currently loading due to a checkbox propagation taking place

packages/core/src/features/checkboxes/feature.ts

@@ -38,13 +38,32 @@ const getAllDescendants = async <T>(
   return includeFolders ? [itemId, ...descendants] : descendants;
 };
 
+const withLoadingState = async <T>(
+  tree: TreeInstance<T>,
+  itemId: string,
+  callback: () => Promise<void>,
+) => {
+  tree.applySubStateUpdate("loadingCheckPropagationItems", (items) => [
+    ...items,
+    itemId,
+  ]);
+  try {
+    await callback();
+  } finally {
+    tree.applySubStateUpdate("loadingCheckPropagationItems", (items) =>
+      items.filter((id) => id !== itemId),
+    );
+  }
+};
+
 export const checkboxesFeature: FeatureImplementation = {
   key: "checkboxes",
 
   overwrites: ["selection"],
 
   getInitialState: (initialState) => ({
     checkedItems: [],
+    loadingCheckPropagationItems: [],
     ...initialState,
   }),
 
@@ -61,6 +80,10 @@ export const checkboxesFeature: FeatureImplementation = {
       defaultConfig.canCheckFolders ?? !propagateCheckedState;
     return {
       setCheckedItems: makeStateUpdater("checkedItems", tree),
+      setLoadingCheckPropagationItems: makeStateUpdater(
+        "loadingCheckPropagationItems",
+        tree,
+      ),
       propagateCheckedState,
       canCheckFolders,
       ...defaultConfig,
@@ -69,6 +92,7 @@ export const checkboxesFeature: FeatureImplementation = {
 
   stateHandlerNames: {
     checkedItems: "setCheckedItems",
+    loadingCheckPropagationItems: "setLoadingCheckPropagationItems",
   },
 
   treeInstance: {
@@ -123,38 +147,45 @@ export const checkboxesFeature: FeatureImplementation = {
     },
 
     setChecked: async ({ item, tree, itemId }) => {
-      const { propagateCheckedState, canCheckFolders } = tree.getConfig();
-      if (item.isFolder() && propagateCheckedState) {
-        const descendants = await getAllDescendants(
-          tree,
-          itemId,
-          canCheckFolders,
-        );
-        tree.applySubStateUpdate("checkedItems", (items) => [
-          ...items,
-          ...descendants,
-        ]);
-      } else if (!item.isFolder() || canCheckFolders) {
-        tree.applySubStateUpdate("checkedItems", (items) => [...items, itemId]);
-      }
+      await withLoadingState(tree, itemId, async () => {
+        const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+        if (item.isFolder() && propagateCheckedState) {
+          const descendants = await getAllDescendants(
+            tree,
+            itemId,
+            canCheckFolders,
+          );
+          tree.applySubStateUpdate("checkedItems", (items) => [
+            ...items,
+            ...descendants,
+          ]);
+        } else if (!item.isFolder() || canCheckFolders) {
+          tree.applySubStateUpdate("checkedItems", (items) => [
+            ...items,
+            itemId,
+          ]);
+        }
+      });
     },
 
     setUnchecked: async ({ item, tree, itemId }) => {
-      const { propagateCheckedState, canCheckFolders } = tree.getConfig();
-      if (item.isFolder() && propagateCheckedState) {
-        const descendants = await getAllDescendants(
-          tree,
-          itemId,
-          canCheckFolders,
-        );
-        tree.applySubStateUpdate("checkedItems", (items) =>
-          items.filter((id) => !descendants.includes(id) && id !== itemId),
-        );
-      } else {
-        tree.applySubStateUpdate("checkedItems", (items) =>
-          items.filter((id) => id !== itemId),
-        );
-      }
+      await withLoadingState(tree, itemId, async () => {
+        const { propagateCheckedState, canCheckFolders } = tree.getConfig();
+        if (item.isFolder() && propagateCheckedState) {
+          const descendants = await getAllDescendants(
+            tree,
+            itemId,
+            canCheckFolders,
+          );
+          tree.applySubStateUpdate("checkedItems", (items) =>
+            items.filter((id) => !descendants.includes(id) && id !== itemId),
+          );
+        } else {
+          tree.applySubStateUpdate("checkedItems", (items) =>
+            items.filter((id) => id !== itemId),
+          );
+        }
+      });
     },
   },
 };

packages/core/src/features/checkboxes/types.ts

@@ -9,9 +9,11 @@ export enum CheckedState {
 export type CheckboxesFeatureDef<T> = {
   state: {
     checkedItems: string[];
+    loadingCheckPropagationItems: string[];
   };
   config: {
     setCheckedItems?: SetStateFn<string[]>;
+    setLoadingCheckPropagationItems?: SetStateFn<string[]>;
     canCheckFolders?: boolean;
     propagateCheckedState?: boolean;
   };
@@ -33,6 +35,8 @@ export type CheckboxesFeatureDef<T> = {
 
     getCheckedState: () => CheckedState;
     getCheckboxProps: () => Record<string, any>;
+
+    isLoadingCheckPropagation: () => boolean;
   };
   hotkeys: never;
 };

packages/sb-react/src/checkboxes/async-configurability.stories.tsx

@@ -82,9 +82,7 @@ export const AsyncConfigurability = () => {
             </button>
             {!tree
               .getState()
-              .loadingItemChildrens.some((child) =>
-                tree.getItemInstance(child).isDescendentOf(item.getId()),
-              ) ? (
+              .loadingCheckPropagationItems.includes(item.getId()) ? (
               <input type="checkbox" {...item.getCheckboxProps()} />
             ) : (
               <>Loading</>
@@ -100,6 +98,10 @@ export const AsyncConfigurability = () => {
       <pre>
         Loading Item Data: {JSON.stringify(tree.getState().loadingItemData)}
       </pre>
+      <pre>
+        Loading Checkbox propagation:{" "}
+        {JSON.stringify(tree.getState().loadingCheckPropagationItems)}
+      </pre>
     </>
   );
 };