From ebe14e0125905ea7a06d1db9c6c01b762004ce9a Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Fri, 21 Mar 2025 10:42:11 +0100
Subject: [PATCH] Add loading spinner to Global Status component during data
 fetch

---
 .../global-status/global-status.component.css | 16 ++++
 .../global-status.component.html              | 80 ++++++++++---------
 2 files changed, 57 insertions(+), 39 deletions(-)

diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.css b/ogWebconsole/src/app/components/global-status/global-status.component.css
index 667f99d..12445da 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.css
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.css
@@ -13,4 +13,20 @@ mat-dialog-content {
     justify-content: flex-end;
     gap: 1em;
     padding: 1.5em;
+}
+
+.spinner-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+}
+
+.loading-spinner {
+    width: 100px;
+    height: 100px;
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/global-status/global-status.component.html b/ogWebconsole/src/app/components/global-status/global-status.component.html
index d6f2044..552b703 100644
--- a/ogWebconsole/src/app/components/global-status/global-status.component.html
+++ b/ogWebconsole/src/app/components/global-status/global-status.component.html
@@ -1,46 +1,48 @@
 <header>
-	<h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1>
+  <h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1>
 </header>
-<mat-dialog-content>
-	<app-loading [isLoading]="loading"></app-loading>
-	<mat-tab-group (selectedTabChange)="onTabChange($event)">
-		<mat-tab label="OgBoot">
-			<div *ngIf="!loading" class="content-container">
-				<app-status-tab 
-					[loading]="loading"
-					[diskUsage]="ogBootDiskUsage"
-					[servicesStatus]="ogBootServicesStatus"
-					[installedOgLives]="installedOgLives"
-					[diskUsageChartData]="ogBootDiskUsageChartData"
-					[view]="view"
-					[colorScheme]="colorScheme"
-					[isDoughnut]="isDoughnut"
-					[showLabels]="showLabels"
-					[isDhcp]="isDhcp">
-				</app-status-tab>
-			</div>
-		</mat-tab>
+<mat-dialog-content [ngClass]="{'loading': loading}">
+  <div class="spinner-container" *ngIf="loading">
+    <mat-spinner class="loading-spinner"></mat-spinner>
+  </div>
+  <mat-tab-group (selectedTabChange)="onTabChange($event)">
+    <mat-tab label="OgBoot">
+      <div *ngIf="!loading" class="content-container">
+        <app-status-tab 
+          [loading]="loading"
+          [diskUsage]="ogBootDiskUsage"
+          [servicesStatus]="ogBootServicesStatus"
+          [installedOgLives]="installedOgLives"
+          [diskUsageChartData]="ogBootDiskUsageChartData"
+          [view]="view"
+          [colorScheme]="colorScheme"
+          [isDoughnut]="isDoughnut"
+          [showLabels]="showLabels"
+          [isDhcp]="isDhcp">
+        </app-status-tab>
+      </div>
+    </mat-tab>
 
-		<mat-tab label="Dhcp">
-			<div *ngIf="!loading" class="content-container">
-				<app-status-tab
-					[loading]="loading"
-					[diskUsage]="dhcpDiskUsage"
-					[servicesStatus]="dhcpServicesStatus"
-					[subnets]="subnets"
-					[diskUsageChartData]="dhcpDiskUsageChartData"
-					[view]="view"
-					[colorScheme]="colorScheme"
-					[isDoughnut]="isDoughnut"
-					[showLabels]="showLabels"
-					[isDhcp]="isDhcp">
-				</app-status-tab>
-			</div>
-		</mat-tab>
+    <mat-tab label="Dhcp">
+      <div *ngIf="!loading" class="content-container">
+        <app-status-tab
+          [loading]="loading"
+          [diskUsage]="dhcpDiskUsage"
+          [servicesStatus]="dhcpServicesStatus"
+          [subnets]="subnets"
+          [diskUsageChartData]="dhcpDiskUsageChartData"
+          [view]="view"
+          [colorScheme]="colorScheme"
+          [isDoughnut]="isDoughnut"
+          [showLabels]="showLabels"
+          [isDhcp]="isDhcp">
+        </app-status-tab>
+      </div>
+    </mat-tab>
 
-		<mat-tab label="Pxe"> Content 3 </mat-tab>
-	</mat-tab-group>
+    <mat-tab label="Pxe"> Content 3 </mat-tab>
+  </mat-tab-group>
 </mat-dialog-content>
 <mat-dialog-actions class="action-container">
-	<button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
+  <button class="ordinary-button" [mat-dialog-close]="true">{{ 'closeButton' | translate }}</button>
 </mat-dialog-actions>
\ No newline at end of file