admin-panel: loading indicator when loading service checks

ng/src/app/pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component.html

@@ -9,43 +9,45 @@
         <fa-icon class="ps-2" [icon]="fa.angleRight"></fa-icon>
       </a>
       <ng-template ngbNavContent>
-        <div class="d-flex flex-column">
-          <div class="btn-group d-block">
-            <button class="btn btn-primary float-end m-1" [disabled]="params?.checkID === -1" (click)="addServiceCheck(serverConfig.id)">
-              <fa-icon class="pe-2" [icon]="fa.plus"></fa-icon>Add Service Check
-            </button>
-          </div>
-          <ngb-accordion
-            #acc="ngbAccordion"
-            [closeOthers]="true"
-            className="flex-fill"
-            [activeIds]="params?.activeIds ?? []"
-            (panelChange)="onAccordeonChange($event)">
-            <ngb-panel *ngFor="let serviceCheck of serviceChecks" [id]="PANEL_ID_PFX + serviceCheck.id">
-              <ng-template ngbPanelHeader let-opened="opened">
-                <button class="accordion-button" ngbPanelToggle [class.collapsed]="!opened" [ngClass]="{ 'bg-primary text-white': opened }">
-                  <p class="flex-fill m-0">{{ serviceCheck.title }}</p>
+        <ng-container *ngIf="!loadingServiceChecks; else loadingServerConfs">
+          <div class="d-flex flex-column">
+            <div class="btn-group d-block">
+              <button class="btn btn-primary float-end m-1" [disabled]="params?.checkID === -1" (click)="addServiceCheck(serverConfig.id)">
+                <fa-icon class="pe-2" [icon]="fa.plus"></fa-icon>Add Service Check
+              </button>
+            </div>
+            <ngb-accordion
+              #acc="ngbAccordion"
+              [closeOthers]="true"
+              className="flex-fill"
+              [activeIds]="params?.activeIds ?? []"
+              (panelChange)="onAccordeonChange($event)">
+              <ngb-panel *ngFor="let serviceCheck of serviceChecks" [id]="PANEL_ID_PFX + serviceCheck.id">
+                <ng-template ngbPanelHeader let-opened="opened">
+                  <button class="accordion-button" ngbPanelToggle [class.collapsed]="!opened" [ngClass]="{ 'bg-primary text-white': opened }">
+                    <p class="flex-fill m-0">{{ serviceCheck.title }}</p>
 
-                  <fa-icon
-                    class="btn btn-sm btn-outline-light me-4"
-                    title="Save configuration"
-                    (click)="saveServiceCheck($event)"
-                    *ngIf="opened"
-                    [icon]="fa.save"></fa-icon>
-                  <fa-icon
-                    class="btn btn-sm btn-outline-danger me-4"
-                    title="Delete this Service Check"
-                    (click)="removeServiceCheck($event, serviceCheck.id)"
-                    *ngIf="opened"
-                    [icon]="fa.trash"></fa-icon>
-                </button>
-              </ng-template>
-              <ng-template ngbPanelContent>
-                <app-service-check-form [serviceCheck]="serviceCheck"></app-service-check-form>
-              </ng-template>
-            </ngb-panel>
-          </ngb-accordion>
-        </div>
+                    <fa-icon
+                      class="btn btn-sm btn-outline-light me-4"
+                      title="Save configuration"
+                      (click)="saveServiceCheck($event)"
+                      *ngIf="opened"
+                      [icon]="fa.save"></fa-icon>
+                    <fa-icon
+                      class="btn btn-sm btn-outline-danger me-4"
+                      title="Delete this Service Check"
+                      (click)="removeServiceCheck($event, serviceCheck.id)"
+                      *ngIf="opened"
+                      [icon]="fa.trash"></fa-icon>
+                  </button>
+                </ng-template>
+                <ng-template ngbPanelContent>
+                  <app-service-check-form [serviceCheck]="serviceCheck"></app-service-check-form>
+                </ng-template>
+              </ngb-panel>
+            </ngb-accordion>
+          </div>
+        </ng-container>
       </ng-template>
     </li>
   </ul>

ng/src/app/pages/admin-panel/admin-service-checks-page/admin-service-checks-page.component.ts

@@ -24,6 +24,7 @@ export class AdminServiceChecksPageComponent {
   @ViewChild('acc') accordeonRef!: NgbAccordion;
   public serverConfigs?: ServerConfig[];
   public serviceChecks: HttpCheckConfig[] = [];
+  public loadingServiceChecks = false;
   public fa = { save: faSave, server: faServer, angleRight: faAngleRight, plus: faPlus, trash: faTrashAlt };
 
   public activeId = 0;
@@ -84,11 +85,13 @@ export class AdminServiceChecksPageComponent {
   }
 
   async fetchServiceChecks(serverId: number) {
+    this.loadingServiceChecks = true;
     try {
       this.serviceChecks = await this.serviceApi.loadServiceChecks(serverId);
     } catch (error: any) {
       console.error(error);
     }
+    this.loadingServiceChecks = false;
   }
 
   private scrollIntoView(panelId: string) {