NAS-117253: Add loading indication to storage dashboard

src/app/pages/storage2/components/dashboard-pool/dashboard-pool.component.html

-<div class="pool-header">
-  <h2 class="pool-name">{{ pool.name }}</h2>
-  <div class="pool-actions">
-    <button
-      *ngIf="!pool.is_upgraded"
-      mat-button
-      color="primary"
-      (click)="onUpgrade()"
-    >{{ 'Upgrade' | translate }}</button>
-
-    <button
-      mat-button
-      (click)="onExport()"
-    >{{ 'Export/Disconnect' | translate }}</button>
-
-    <button
-      mat-button
-      (click)="onExpand()"
-    >{{ 'Expand' | translate }}</button>
+<div *ngIf="!isLoading && !isDisksLoading && !isVolumeDataLoading; else loadingSkeleton">
+  <div class="pool-header">
+    <h2 class="pool-name">{{ pool.name }}</h2>
+    <div class="pool-actions">
+      <button
+        *ngIf="!pool.is_upgraded"
+        mat-button
+        color="primary"
+        (click)="onUpgrade()"
+      >{{ 'Upgrade' | translate }}</button>
+  
+      <button
+        mat-button
+        (click)="onExport()"
+      >{{ 'Export/Disconnect' | translate }}</button>
+  
+      <button
+        mat-button
+        (click)="onExpand()"
+      >{{ 'Expand' | translate }}</button>
+    </div>
+  </div>
+  
+  <div
+    gdGap="8px"
+    gdColumns="calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px)"
+    gdColumns.lt-xl="calc(50% - 4px) calc(50% - 4px)"
+    gdColumns.lt-md="auto"
+  >
+    <ix-widget-topology
+      [poolState]="pool"
+      [loading]="isDisksLoading"
+      [diskDictionary]="diskDictionary"
+    ></ix-widget-topology>
+    <ix-pool-usage-card
+      [loading]="isVolumeDataLoading"
+      [poolState]="pool"
+      [volumeData]="volumeData"
+    ></ix-pool-usage-card>
+    <ix-zfs-health-card [pool]="pool"></ix-zfs-health-card>
+    <ix-disk-health-card
+      [poolState]="pool"
+      [loading]="isDisksLoading"
+      [diskDictionary]="diskDictionary"
+    ></ix-disk-health-card>
   </div>
 </div>
 
-<div
-  gdGap="8px"
-  gdColumns="calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px)"
-  gdColumns.lt-xl="calc(50% - 4px) calc(50% - 4px)"
-  gdColumns.lt-md="auto"
->
-  <ix-widget-topology
-    [poolState]="pool"
-    [loading]="isDisksLoading"
-    [diskDictionary]="diskDictionary"
-  ></ix-widget-topology>
-  <ix-pool-usage-card
-    [loading]="isVolumeDataLoading"
-    [poolState]="pool"
-    [volumeData]="volumeData"
-  ></ix-pool-usage-card>
-  <ix-zfs-health-card [pool]="pool"></ix-zfs-health-card>
-  <ix-disk-health-card
-    [poolState]="pool"
-    [loading]="isDisksLoading"
-    [diskDictionary]="diskDictionary"
-  ></ix-disk-health-card>
-</div>
+
+<ng-template #loadingSkeleton>
+  <div class="skeleton-content">
+    <div class="pool-header">
+      <ngx-skeleton-loader></ngx-skeleton-loader>
+    </div>
+    <div
+      gdGap="8px"
+      gdColumns="calc(25% - 6px) calc(25% - 6px) calc(25% - 6px) calc(25% - 6px)"
+      gdColumns.lt-xl="calc(50% - 4px) calc(50% - 4px)"
+      gdColumns.lt-md="auto"
+    >
+      <mat-card class="card" *ngFor="let in of counter(4)">
+        <mat-card-content>
+          <ngx-skeleton-loader *ngFor="let in of counter(5)" fxLayout="column" fxLayoutAlign="center"></ngx-skeleton-loader>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</ng-template>

src/app/pages/storage2/components/dashboard-pool/dashboard-pool.component.scss

@@ -4,6 +4,10 @@
   display: block;
 }
 
+.card {
+  @include details-card();
+}
+
 .pool-header {
   align-items: center;
   display: flex;
@@ -22,3 +26,31 @@
     margin-left: 6px;
   }
 }
+
+.skeleton-content {
+  .pool-header {
+    ngx-skeleton-loader {
+      display: inline-block;
+      height: 40px;
+      margin-bottom: 8px;
+      width: 100%;
+    }
+    
+    ::ng-deep .loader {
+      height: 40px;
+    }
+  }
+
+  .card {
+    ngx-skeleton-loader {
+      display: inline-block;
+      height: 20px;
+      margin: 10px 0;
+      width: 100%;
+  
+      ::ng-deep .loader {
+        margin: 0;
+      }
+    }
+  }
+}

src/app/pages/storage2/components/dashboard-pool/dashboard-pool.component.ts

@@ -32,6 +32,7 @@ import { AppLoaderService, DialogService, WebSocketService } from 'app/services'
 })
 export class DashboardPoolComponent implements OnInit {
   @Input() pool: Pool;
+  @Input() isLoading: boolean;
 
   volumeData: VolumeData;
   isVolumeDataLoading = false;
@@ -159,4 +160,8 @@ export class DashboardPoolComponent implements OnInit {
       untilDestroyed(this),
     ).subscribe();
   }
+
+  counter(i: number): number[] {
+    return new Array(i);
+  }
 }

src/app/pages/storage2/components/pools-dashboard/pools-dashboard.component.html

@@ -22,5 +22,6 @@
 <ix-dashboard-pool
   *ngFor="let pool of pools"
   [pool]="pool"
+  [isLoading]="isPoolsLoading"
   class="pool"
 ></ix-dashboard-pool>

src/app/pages/storage2/components/pools-dashboard/pools-dashboard.component.ts

@@ -64,8 +64,10 @@ export class PoolsDashboardComponent implements OnInit, AfterViewInit {
     this.ws.call('pool.query', [[], { extra: { is_upgraded: true } }]).pipe(untilDestroyed(this)).subscribe(
       (pools: Pool[]) => {
         this.pools = this.sorter.tableSorter(pools, 'name', 'asc');
-        this.isPoolsLoading = false;
-        this.cdr.markForCheck();
+        setTimeout(() => {
+          this.isPoolsLoading = false;
+          this.cdr.markForCheck();
+        }, 2000);
       },
     );
   }