opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add loading spinner to Global Status component during data fetch

pull/18/head
Lucas Lara García 2025-03-21 10:42:11 +01:00
parent 44c4c60297
commit ebe14e0125
2 changed files with 57 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ogWebconsole/src/app/components/global-status/global-status.component.css
View File

@ -14,3 +14,19 @@ mat-dialog-content {
gap: 1em; gap: 1em;
padding: 1.5em; 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;
}

6
ogWebconsole/src/app/components/global-status/global-status.component.html
View File

@ -1,8 +1,10 @@
<header> <header>
<h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1> <h1 mat-dialog-title>{{'GlobalStatus' | translate}}</h1>
</header> </header>
<mat-dialog-content> <mat-dialog-content [ngClass]="{'loading': loading}">
<app-loading [isLoading]="loading"></app-loading> <div class="spinner-container" *ngIf="loading">
<mat-spinner class="loading-spinner"></mat-spinner>
</div>
<mat-tab-group (selectedTabChange)="onTabChange($event)"> <mat-tab-group (selectedTabChange)="onTabChange($event)">
<mat-tab label="OgBoot"> <mat-tab label="OgBoot">
<div *ngIf="!loading" class="content-container"> <div *ngIf="!loading" class="content-container">