docs(tree): fix dynamic tree demo (#10384)

Author: tinayuangao

src/demo-app/tree/dynamic-tree-demo/dynamic-database.ts

@@ -15,6 +15,7 @@ import {map} from 'rxjs/operators';
 
 /** Flat node with expandable and level information */
 export class DynamicFlatNode {
+  isLoading: boolean = false;
   constructor(public item: string, public level: number = 1, public expandable: boolean = false) {}
 }
 
@@ -69,14 +70,14 @@ export class DynamicDataSource {
               private database: DynamicDatabase) {}
 
   connect(collectionViewer: CollectionViewer): Observable<DynamicFlatNode[]> {
-    return merge(collectionViewer.viewChange, this.treeControl.expansionModel.onChange!)
-        .pipe(map((change) => {
-      if ((change as SelectionChange<DynamicFlatNode>).added ||
+    this.treeControl.expansionModel.onChange!.subscribe(change => {
+        if ((change as SelectionChange<DynamicFlatNode>).added ||
           (change as SelectionChange<DynamicFlatNode>).removed) {
-        this.handleTreeControl(change as SelectionChange<DynamicFlatNode>);
-      }
-      return this.data;
-    }));
+          this.handleTreeControl(change as SelectionChange<DynamicFlatNode>);
+        }
+      });
+
+    return merge(collectionViewer.viewChange, this.dataChange).pipe(map(() => this.data));
   }
 
   /** Handle expand/collapse behaviors */
@@ -99,16 +100,21 @@ export class DynamicDataSource {
     if (!children || index < 0) { // If no children, or cannot find the node, no op
       return;
     }
+    node.isLoading = true;
 
-    if (expand) {
-      const nodes = children.map(name =>
+    setTimeout(() => {
+      if (expand) {
+        const nodes = children.map(name =>
           new DynamicFlatNode(name, node.level + 1, this.database.isExpandable(name)));
-      this.data.splice(index + 1, 0, ...nodes);
-    } else {
-      this.data.splice(index + 1, children.length);
-    }
+        this.data.splice(index + 1, 0, ...nodes);
+      } else {
+        this.data.splice(index + 1, children.length);
+      }
 
-    // notify the change
-    this.dataChange.next(this.data);
+      // notify the change
+      this.dataChange.next(this.data);
+      node.isLoading = false;
+    }, 1000);
   }
+
 }

src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html

@@ -11,5 +11,8 @@
       </mat-icon>
     </button>
     {{node.item}}
+    <mat-progress-bar *ngIf="node.isLoading"
+                      mode="indeterminate"
+                      class="demo-tree-progress-bar"></mat-progress-bar>
   </mat-tree-node>
 </mat-tree>

src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss

@@ -0,0 +1,3 @@
+.demo-tree-progress-bar {
+  margin-left: 30px;
+}

src/demo-app/tree/tree-demo-module.ts

@@ -16,6 +16,7 @@ import {
   MatFormFieldModule,
   MatIconModule,
   MatInputModule,
+  MatProgressBarModule,
   MatTreeModule
 } from '@angular/material';
 import {TreeDemo} from './tree-demo';
@@ -36,6 +37,7 @@ import {LoadmoreTreeDemo} from './loadmore-tree-demo/loadmore-tree-demo';
     MatIconModule,
     MatInputModule,
     MatTreeModule,
+    MatProgressBarModule,
   ],
   declarations: [
     ChecklistNestedTreeDemo,