From 1aed15db9f360b126ef636d14b4e9bb17f2f4d44 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <neil.macdougall@suse.com>
Date: Sat, 15 Feb 2020 20:29:38 +0000
Subject: [PATCH] Add loading indicator for Workload resource stats

---
 .../helm-release-summary-tab.component.html   | 19 +++++++++++++++----
 .../helm-release-summary-tab.component.ts     |  8 ++++++++
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.html b/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.html
index 893a819405..f69faf6ea9 100644
--- a/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.html
+++ b/custom-src/frontend/app/custom/kubernetes/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/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts b/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
index be62056bf6..43b268b89a 100644
--- a/custom-src/frontend/app/custom/kubernetes/workloads/release/tabs/helm-release-summary-tab/helm-release-summary-tab.component.ts
+++ b/custom-src/frontend/app/custom/kubernetes/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`,
       {