Merge pull request #313 from SUSE/workload-loading-indicator

Add loading indicator for Workload resource stats
SUSE · Feb 17, 2020 · daedc68 · daedc68
2 parents 962bfd7 + 1aed15d
commit daedc68
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/...s/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.html b/...s/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.html
@@ -56,11 +56,22 @@
       </app-tile-grid>
 
       <app-metadata-item class="chart-details__item" label="All Resources"></app-metadata-item>
-      <div *ngIf="resources$ | async as resources" class="grid">
-        <app-card-number-metric *ngFor="let res of resources" label="{{ res.label }}" icon="{{ res.icon.name }}"
-          iconFont="{{ res.icon.font }}" value="{{ res.count }}">
-        </app-card-number-metric>
+      <div *ngIf="hasAllResources$ | async; else stillLoadingResources">
+        <div *ngIf="resources$ | async as resources" class="grid">
+          <app-card-number-metric *ngFor="let res of resources" label="{{ res.label }}" icon="{{ res.icon.name }}"
+            iconFont="{{ res.icon.font }}" value="{{ res.count }}">
+          </app-card-number-metric>
+        </div>
       </div>
+      <ng-template #stillLoadingResources>
+        <div class="resources__loading">
+          <div class="resources__loading__content">
+            Updating Resource Information
+            <mat-progress-bar class="" [color]="'primary'" mode="indeterminate">
+            </mat-progress-bar>
+          </div>
+        </div>
+      </ng-template>
     </div>
     <ng-template #loadingResources>
       <div class="resources__loading">

diff --git a/...tes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts b/...tes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
@@ -28,6 +28,7 @@ export class HelmReleaseSummaryTabComponent implements OnDestroy {
   private busyDeletingSubject = new ReplaySubject<boolean>();
   public isBusy$: Observable<boolean>;
   public hasResources$: Observable<boolean>;
+  public hasAllResources$: Observable<boolean>;
   private readonly DEFAULT_LOADING_MESSAGE = 'Retrieving Release Details';
   public loadingMessage = this.DEFAULT_LOADING_MESSAGE;
 
@@ -134,6 +135,13 @@ export class HelmReleaseSummaryTabComponent implements OnDestroy {
       map(([chartData, resources]) => !!chartData && !!resources)
     );
 
+    this.hasAllResources$ = combineLatest([
+      this.resources$,
+      this.hasResources$
+    ]).pipe(
+      map(([resources, hasSome]) => hasSome && resources && resources.length > 0)
+    );
+
     this.deleteReleaseConfirmation = new ConfirmationDialogConfig(
       `Delete Workload`,
       {