From 4c9a6d2257bd84eb522de98490a5cc80d3c0029a Mon Sep 17 00:00:00 2001
From: Alexey <wrouds@gmail.com>
Date: Mon, 18 Mar 2024 20:26:30 +0800
Subject: [PATCH] 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 <125263541+dariamarutkina@users.noreply.github.com>
---
 .../src/Tree/TreeNode/TreeNodeNestedMessage.m.css   |  2 +-
 .../NavigationTreeNode/NavigationNode.tsx           |  2 +-
 .../NavigationNode/NavigationNodeNested.tsx         |  4 ++++
 .../NavigationTree/ElementsTree/useElementsTree.ts  | 13 +++++++++++--
 4 files changed, 17 insertions(+), 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
index d1e5ec397d..375640b4af 100644
--- 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/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
index 7a21af46d4..05cd399c37 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode.tsx
+++ b/webapp/packages/plugin-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/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
index bf10c7e011..167e79bcbc 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/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
index 05b965ca40..a45ecbd569 100644
--- 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) {