CB-3884 fix: tree empty flickering (#2457)

* CB-3884 fix: tree empty flickering * CB-3884 fix: blink empty folder message in tree --------- Co-authored-by: Daria Marutkina <[email protected]>
dbeaver · Mar 18, 2024 · 4c9a6d2 · 4c9a6d2
1 parent e78155a
commit 4c9a6d2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 4 deletions.
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.m.css b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeNestedMessage.m.css
@@ -1,4 +1,4 @@
 .treeNodeNestedMessage {
   composes: theme-typography--caption from global;
-  padding: 4px 12px;
+  padding: 1px 12px;
 }
diff --git a/...gin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx b/...gin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
@@ -72,7 +72,7 @@ export const NavigationNode: NavigationNodeComponent = observer(function Navigat
   }
 
   const hasNodes = getComputed(() => !!dndBox.state.context && dndBox.state.canDrop && dndBox.state.isOverCurrent);
-  const expanded = useDeferredValue(navNode.expanded || externalExpanded);
+  const expanded = useDeferredValue((navNode.expanded || externalExpanded) && navNode.loaded);
 
   useEffect(
     () => () => {

diff --git a/...rc/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx b/...rc/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
@@ -50,6 +50,10 @@ export const NavigationNodeNested = observer(
     children = useDeferredValue(children);
     empty = useDeferredValue(empty);
 
+    if (empty && !treeContext?.tree.settings?.foldersTree) {
+      return null;
+    }
+
     if (nodeId !== undefined && rootFolder) {
       return <NavigationNode nodeId={nodeId} path={path} expanded />;
     }

diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/useElementsTree.ts
@@ -217,7 +217,7 @@ export function useElementsTree(options: IOptions): IElementsTree {
               if (!loaded) {
                 const node = navNodeInfoResource.get(child);
 
-                if (node) {
+                if (node && expanded && elementsTree.isNodeExpandable(child)) {
                   await elementsTree.expand(node, false);
                 }
                 return;
@@ -232,6 +232,15 @@ export function useElementsTree(options: IOptions): IElementsTree {
                 }
               }
 
+              if (elementsTree.isNodeExpandable(child) && expanded && elementsTree.getNodeChildren(child).length === 0) {
+                const node = navNodeInfoResource.get(child);
+
+                if (node) {
+                  await elementsTree.expand(node, false);
+                }
+                return;
+              }
+
               if (
                 elementsTree.settings?.foldersTree &&
                 options.folderExplorer.options.expandFoldersWithSingleElement &&
@@ -424,7 +433,7 @@ export function useElementsTree(options: IOptions): IElementsTree {
       },
       isNodeExpandable(nodeId: string): boolean {
         if (nodeId === this.root) {
-          return true;
+          return false;
         }
 
         if (options.expandStateGetters?.length) {