[tree] fix #3450: display node busy state

Signed-off-by: Anton Kosyakov <anton.kosyakov@typefox.io>

packages/callhierarchy/src/browser/style/index.css

@@ -22,7 +22,7 @@
     width: 100%;
 }
 
-.theia-CallHierarchyTree .theia-ExpansionToggle {
+.theia-CallHierarchyTree .theia-tree-node-left-state {
     min-width: 9px;
     padding-right: 4px;
 }

packages/core/src/browser/style/icons.css

@@ -49,3 +49,20 @@
 .theia-add-icon {
 	background: var(--theia-icon-add) center center no-repeat;
 }
+
+@keyframes theia-spin {
+	100% {
+		transform:rotate(360deg);
+	}
+}
+
+.theia-animation-spin {
+	animation: theia-spin 1.5s linear infinite;
+}
+
+.theia-loading-icon {
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    background: var(--theia-icon-loading) center center no-repeat;
+    animation: theia-spin 1.25s linear infinite;
+}

packages/core/src/browser/style/tree.css

@@ -57,7 +57,7 @@
     width: calc(100% - var(--theia-scrollbar-rail-width));
 }
 
-.theia-ExpansionToggle {
+.theia-tree-node-left-state {
     min-width: 10px;
     display: flex;
     justify-content: center;

packages/core/src/browser/style/variables-bright.useable.css

@@ -54,6 +54,7 @@ is not optimized for dense, information rich UIs.
   --theia-ui-padding: 6px;
 
   /* Icons */
+  --theia-icon-loading: url(../icons/loading-light.svg);
   --theia-icon-close: url(../icons/close-bright.svg);
   --theia-icon-arrow-up: url(../icons/arrow-up-bright.svg);
   --theia-icon-arrow-down: url(../icons/arrow-down-bright.svg);

packages/core/src/browser/style/variables-dark.useable.css

@@ -54,6 +54,7 @@ is not optimized for dense, information rich UIs.
   --theia-ui-padding: 6px;
 
   /* Icons */
+  --theia-icon-loading: url(../icons/loading-dark.svg);
   --theia-icon-close: url(../icons/close-dark.svg);
   --theia-icon-arrow-up: url(../icons/arrow-up-dark.svg);
   --theia-icon-arrow-down: url(../icons/arrow-down-dark.svg);

packages/core/src/browser/tree/tree-model.ts

@@ -15,7 +15,11 @@
  ********************************************************************************/
 
 import { inject, injectable, postConstruct } from 'inversify';
-import { DisposableCollection, Event, Emitter, SelectionProvider, ILogger, WaitUntilEvent } from '../../common';
+import { Event, Emitter, WaitUntilEvent } from '../../common/event';
+import { DisposableCollection } from '../../common/disposable';
+import { CancellationToken } from '../../common/cancellation';
+import { ILogger } from '../../common/logger';
+import { SelectionProvider, } from '../../common/selection-service';
 import { Tree, TreeNode, CompositeTreeNode } from './tree';
 import { TreeSelectionService, SelectableTreeNode, TreeSelection } from './tree-selection';
 import { TreeExpansionService, ExpandableTreeNode } from './tree-expansion';
@@ -130,7 +134,6 @@ export interface TreeModel extends Tree, TreeSelectionService, TreeExpansionServ
      * If no node was selected previously, invoking this method does nothing.
      */
     selectRange(node: Readonly<SelectableTreeNode>): void;
-
 }
 
 @injectable()
@@ -431,6 +434,14 @@ export class TreeModelImpl implements TreeModel, SelectionProvider<ReadonlyArray
         }
     }
 
+    get onDidChangeBusy(): Event<TreeNode> {
+        return this.tree.onDidChangeBusy;
+    }
+
+    markAsBusy(node: Readonly<TreeNode>, ms: number, token: CancellationToken): Promise<void> {
+        return this.tree.markAsBusy(node, ms, token);
+    }
+
 }
 export namespace TreeModelImpl {
     export interface State {

packages/core/src/browser/tree/tree-widget.tsx

@@ -48,6 +48,7 @@ export const TREE_NODE_CONTENT_CLASS = 'theia-TreeNodeContent';
 export const TREE_NODE_TAIL_CLASS = 'theia-TreeNodeTail';
 export const TREE_NODE_SEGMENT_CLASS = 'theia-TreeNodeSegment';
 export const TREE_NODE_SEGMENT_GROW_CLASS = 'theia-TreeNodeSegmentGrow';
+export const TREE_NODE_LEFT_STATE_CLASS = 'theia-tree-node-left-state';
 
 export const EXPANDABLE_TREE_NODE_CLASS = 'theia-ExpandableTreeNode';
 export const COMPOSITE_TREE_NODE_CLASS = 'theia-CompositeTreeNode';
@@ -218,6 +219,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             this.model,
             this.model.onChanged(() => this.updateRows()),
             this.model.onSelectionChanged(() => this.updateScrollToRow({ resize: false })),
+            this.model.onDidChangeBusy(() => this.update()),
             this.model.onNodeRefreshed(() => this.updateDecorations()),
             this.model.onExpansionChanged(() => this.updateDecorations()),
             this.decoratorService,
@@ -507,6 +509,17 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         event.stopPropagation();
     }
 
+    protected renderStateLeft(node: TreeNode, props: NodeProps): React.ReactNode {
+        if (node.busy) {
+            return this.renderBusy(node, props);
+        }
+        return this.renderExpansionToggle(node, props);
+    }
+
+    protected renderBusy(node: TreeNode, props: NodeProps): React.ReactNode {
+        return <div className={[TREE_NODE_SEGMENT_CLASS, TREE_NODE_LEFT_STATE_CLASS, 'theia-loading-icon'].join(' ')} />;
+    }
+
     /**
      * Render the node expansion toggle.
      * @param node the tree node.
@@ -517,7 +530,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             // eslint-disable-next-line no-null/no-null
             return null;
         }
-        const classes = [TREE_NODE_SEGMENT_CLASS, EXPANSION_TOGGLE_CLASS];
+        const classes = [TREE_NODE_SEGMENT_CLASS, TREE_NODE_LEFT_STATE_CLASS, EXPANSION_TOGGLE_CLASS];
         if (!node.expanded) {
             classes.push(COLLAPSED_CLASS);
         }
@@ -783,7 +796,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         }
         const attributes = this.createNodeAttributes(node, props);
         const content = <div className={TREE_NODE_CONTENT_CLASS}>
-            {this.renderExpansionToggle(node, props)}
+            {this.renderStateLeft(node, props)}
             {this.decorateIcon(node, this.renderIcon(node, props))}
             {this.renderCaptionAffixes(node, props, 'captionPrefixes')}
             {this.renderCaption(node, props)}
@@ -1172,6 +1185,9 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if ('nextSibling' in copy) {
             delete copy.nextSibling;
         }
+        if ('busy' in copy) {
+            delete copy.busy;
+        }
         if (CompositeTreeNode.is(node)) {
             copy.children = [];
             for (const child of node.children) {