fix(admin): fix application form page spinners

* Divided the 'loading' variable into two separate variables handling the loading of header and table individually.

Author: michalberky

apps/admin-gui/src/app/vos/pages/group-detail-page/group-settings/group-settings-application-form/group-settings-application-form.component.html

@@ -1,9 +1,9 @@
 <h1 class="page-subtitle">
   {{'GROUP_DETAIL.SETTINGS.APPLICATION_FORM.TITLE' | translate}}
 </h1>
-<mat-spinner *ngIf="loading" class="ms-auto me-auto"> </mat-spinner>
+<mat-spinner *ngIf="loadingHeader" class="ms-auto me-auto"> </mat-spinner>
 <div *ngIf="!noApplicationForm">
-  <div *ngIf="!loading" class="d-flex w-75">
+  <div *ngIf="!loadingHeader" class="d-flex w-75">
     <div>
       <div class="fw-bold">
         {{'GROUP_DETAIL.SETTINGS.APPLICATION_FORM.MODULE_NAMES' | translate}}:
@@ -105,7 +105,7 @@ <h1 class="page-subtitle">
   </ng-template>
   <div class="position-relative">
     <app-application-form-list
-      *perunWebAppsLoader="loading; indicator: spinner"
+      *perunWebAppsLoader="loadingTable; indicator: spinner"
       (applicationFormItemsChange)="changeItems()"
       [applicationForm]="applicationForm"
       [applicationFormItems]="applicationFormItems"
@@ -115,7 +115,7 @@ <h1 class="page-subtitle">
     </app-application-form-list>
   </div>
 </div>
-<div *ngIf="!loading && noApplicationForm">
+<div *ngIf="!loadingTable && noApplicationForm">
   <perun-web-apps-alert
     alert_type="warn"
     >{{'GROUP_DETAIL.SETTINGS.APPLICATION_FORM.NO_APPLICATION_FORM' | translate}}</perun-web-apps-alert

apps/admin-gui/src/app/vos/pages/group-detail-page/group-settings/group-settings-application-form/group-settings-application-form.component.ts

@@ -34,7 +34,8 @@ export class GroupSettingsApplicationFormComponent implements OnInit {
   @HostBinding('class.router-component') true;
   @ViewChild('autoRegToggle')
   autoRegToggle: MatSlideToggle;
-  loading = false;
+  loadingHeader = false;
+  loadingTable = false;
   applicationForm: ApplicationForm;
   applicationFormItems: ApplicationFormItem[] = [];
   noApplicationForm = false;
@@ -62,7 +63,8 @@ export class GroupSettingsApplicationFormComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.loading = true;
+    this.loadingHeader = true;
+    this.loadingTable = true;
     this.group = this.entityStorageService.getEntity();
     this.setAuth();
     // FIXME this might not work in case of some race condition (other request finishes sooner)
@@ -80,16 +82,21 @@ export class GroupSettingsApplicationFormComponent implements OnInit {
               )
               .subscribe((attr) => {
                 this.autoRegistrationEnabled = !!attr.value;
-                this.loading = false;
+                this.loadingHeader = false;
+                this.loadingTable = false;
               });
           },
-          () => (this.loading = false)
+          () => {
+            this.loadingHeader = false;
+            this.loadingTable = false;
+          }
         );
       },
       (error: RPCError) => {
         if (error.name === 'FormNotExistsException') {
           this.noApplicationForm = true;
-          this.loading = false;
+          this.loadingHeader = false;
+          this.loadingTable = false;
         } else {
           this.notificator.showRPCError(error);
         }
@@ -195,16 +202,16 @@ export class GroupSettingsApplicationFormComponent implements OnInit {
   }
 
   updateFormItems(): void {
-    this.loading = true;
+    this.loadingTable = true;
     this.refreshApplicationForm = true;
     this.registrarManager.getFormItemsForGroup(this.group.id).subscribe({
       next: (formItems) => {
         this.applicationFormItems = formItems;
         this.itemsChanged = false;
         this.refreshApplicationForm = false;
-        this.loading = false;
+        this.loadingTable = false;
       },
-      error: () => (this.loading = false),
+      error: () => (this.loadingTable = false),
     });
   }
 

apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-settings/vo-settings-application-form/vo-settings-application-form.component.html

@@ -1,9 +1,9 @@
 <h1 class="page-subtitle">
   {{'VO_DETAIL.SETTINGS.APPLICATION_FORM.TITLE' | translate}}
 </h1>
-<mat-spinner *ngIf="loading" class="ms-auto me-auto"> </mat-spinner>
+<mat-spinner *ngIf="loadingHeader" class="ms-auto me-auto"> </mat-spinner>
 <div>
-  <div *ngIf="!loading" class="d-flex w-75">
+  <div *ngIf="!loadingHeader" class="d-flex w-75">
     <div>
       <div class="fw-bold">
         {{'VO_DETAIL.SETTINGS.APPLICATION_FORM.MODULE_NAMES' | translate}}:
@@ -93,7 +93,7 @@ <h1 class="page-subtitle">
   </ng-template>
   <div class="position-relative">
     <app-application-form-list
-      *perunWebAppsLoader="loading; indicator: spinner"
+      *perunWebAppsLoader="loadingTable; indicator: spinner"
       (applicationFormItemsChange)="changeItems()"
       [applicationForm]="applicationForm"
       [applicationFormItems]="applicationFormItems"

apps/admin-gui/src/app/vos/pages/vo-detail-page/vo-settings/vo-settings-application-form/vo-settings-application-form.component.ts

@@ -28,7 +28,8 @@ import { getDefaultDialogConfig } from '@perun-web-apps/perun/utils';
 export class VoSettingsApplicationFormComponent implements OnInit {
   static id = 'VoSettingsApplicationFormComponent';
   @HostBinding('class.router-component') true;
-  loading = false;
+  loadingHeader = false;
+  loadingTable = false;
   applicationForm: ApplicationForm;
   applicationFormItems: ApplicationFormItem[] = [];
   itemsChanged = false;
@@ -53,14 +54,16 @@ export class VoSettingsApplicationFormComponent implements OnInit {
   ) {}
 
   ngOnInit(): void {
-    this.loading = true;
+    this.loadingHeader = true;
+    this.loadingTable = true;
     this.vo = this.entityStorageService.getEntity();
     this.setAuthRights();
     this.registrarManager.getVoApplicationForm(this.vo.id).subscribe((form) => {
       this.applicationForm = form;
       this.registrarManager.getFormItemsForVo(this.vo.id).subscribe((formItems) => {
         this.applicationFormItems = formItems;
-        this.loading = false;
+        this.loadingHeader = false;
+        this.loadingTable = false;
       });
     });
   }
@@ -142,14 +145,14 @@ export class VoSettingsApplicationFormComponent implements OnInit {
   }
 
   updateFormItems(): void {
-    this.loading = true;
+    this.loadingTable = true;
     this.refreshApplicationForm = true;
     this.registrarManager.getFormItemsForVo(this.vo.id).subscribe((formItems) => {
       this.applicationFormItems = formItems;
       this.itemsChanged = false;
       this.setAuthRights();
       this.refreshApplicationForm = false;
-      this.loading = false;
+      this.loadingTable = false;
     });
   }
 
@@ -158,7 +161,7 @@ export class VoSettingsApplicationFormComponent implements OnInit {
   }
 
   save(): void {
-    this.loading = true;
+    this.loadingTable = true;
     let i = 0;
     for (const item of this.applicationFormItems) {
       item.ordnum = i;
@@ -178,7 +181,7 @@ export class VoSettingsApplicationFormComponent implements OnInit {
             });
           this.updateFormItems();
         },
-        error: () => (this.loading = false),
+        error: () => (this.loadingTable = false),
       });
   }