[tree] fix #3450: display node busy state

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

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

@@ -49,3 +49,13 @@
 .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;
+}

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

@@ -58,28 +58,27 @@
 }
 
 .theia-ExpansionToggle {
-    min-width: 10px;
     display: flex;
     justify-content: center;
-    padding-left: calc(var(--theia-ui-padding)*2/3);
-    padding-right: calc(var(--theia-ui-padding)*2/3);
+    padding-left: calc(var(--theia-ui-padding)/2);
+    padding-right: calc(var(--theia-ui-padding)/2);
+    width: var(--theia-icon-size);
+    height: var(--theia-icon-size);
+    background-size: var(--theia-icon-size);
+    background: var(--theia-icon-chevron-right) center center no-repeat;
 }
 
-.theia-ExpansionToggle:hover {
-    cursor: pointer;
+.theia-ExpansionToggle.theia-mod-busy {
+    background: var(--theia-icon-loading) center center no-repeat;
+    animation: theia-spin 1.25s linear infinite;
 }
 
-.theia-ExpansionToggle.theia-mod-collapsed::before {
-    font-family: FontAwesome;
-    font-size: calc(var(--theia-content-font-size) * 0.8);
-    content: "\f0da";
+.theia-ExpansionToggle:not(.theia-mod-busy):hover {
+    cursor: pointer;
 }
 
-.theia-ExpansionToggle:not(.theia-mod-collapsed)::before {
-    font-family: FontAwesome;
-    font-size: calc(var(--theia-content-font-size) * 0.8);
-    content: "\f0da";
-    transform: rotate(45deg);
+.theia-ExpansionToggle:not(.theia-mod-busy):not(.theia-mod-collapsed) {
+    transform: rotate(90deg);
 }
 
 .theia-Tree:focus .theia-TreeNode.theia-mod-selected,

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

@@ -54,6 +54,8 @@ is not optimized for dense, information rich UIs.
   --theia-ui-padding: 6px;
 
   /* Icons */
+  --theia-icon-chevron-right: url(../icons/chevron-right-light.svg);
+  --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,8 @@ is not optimized for dense, information rich UIs.
   --theia-ui-padding: 6px;
 
   /* Icons */
+  --theia-icon-chevron-right: url(../icons/chevron-right-dark.svg);
+  --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

@@ -20,7 +20,7 @@ import { Disposable, MenuPath, SelectionService } from '../../common';
 import { Key, KeyCode, KeyModifier } from '../keyboard/keys';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { StatefulWidget } from '../shell';
-import { EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, Widget } from '../widgets';
+import { EXPANSION_TOGGLE_CLASS, SELECTED_CLASS, COLLAPSED_CLASS, FOCUS_CLASS, Widget, BUSY_CLASS } from '../widgets';
 import { TreeNode, CompositeTreeNode } from './tree';
 import { TreeModel } from './tree-model';
 import { ExpandableTreeNode } from './tree-expansion';
@@ -218,6 +218,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,
@@ -521,6 +522,9 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
         if (!node.expanded) {
             classes.push(COLLAPSED_CLASS);
         }
+        if (node.busy) {
+            classes.push(BUSY_CLASS);
+        }
         const className = classes.join(' ');
         return <div
             data-node-id={node.id}
@@ -1172,6 +1176,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) {