Enhancement: improved loading visuals (#8435)

src-ui/src/app/components/manage/custom-fields/custom-fields.component.html

@@ -13,16 +13,23 @@
 <ul class="list-group">
 
   <li class="list-group-item">
-    <div class="row">
+    <div class="row reveal">
       <div class="col" i18n>Name</div>
       <div class="col" i18n>Data Type</div>
       <div class="col" i18n>Actions</div>
     </div>
   </li>
 
+  @if (loading) {
+    <li class="list-group-item">
+      <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+      <ng-container i18n>Loading...</ng-container>
+    </li>
+  }
+
   @for (field of fields; track field) {
     <li class="list-group-item">
-      <div class="row">
+      <div class="row" [class.reveal]="reveal">
         <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editField(field)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.CustomField)">{{field.name}}</button></div>
         <div class="col d-flex align-items-center">{{getDataType(field)}}</div>
         <div class="col">
@@ -59,7 +66,7 @@
       </div>
     </li>
   }
-  @if (fields.length === 0) {
+  @if (!loading && fields.length === 0) {
     <li class="list-group-item" i18n>No fields defined.</li>
   }
 </ul>

src-ui/src/app/components/manage/custom-fields/custom-fields.component.scss

@@ -2,3 +2,12 @@
 .d-block.d-sm-none .dropdown-toggle::after {
     display: none;
 }
+
+.list-group-item .row {
+    opacity: 0;
+    transition: opacity .2s;
+}
+
+.list-group-item .reveal {
+    opacity: 1;
+}

src-ui/src/app/components/manage/custom-fields/custom-fields.component.spec.ts

@@ -95,6 +95,8 @@ describe('CustomFieldsComponent', () => {
     fixture = TestBed.createComponent(CustomFieldsComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
+    jest.useFakeTimers()
+    jest.advanceTimersByTime(100)
   })
 
   it('should support create, show notification on error / success', () => {
@@ -119,6 +121,7 @@ describe('CustomFieldsComponent', () => {
     editDialog.succeeded.emit(fields[0])
     expect(toastInfoSpy).toHaveBeenCalled()
     expect(reloadSpy).toHaveBeenCalled()
+    jest.advanceTimersByTime(100)
   })
 
   it('should support edit, show notification on error / success', () => {

src-ui/src/app/components/manage/custom-fields/custom-fields.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { Subject, takeUntil } from 'rxjs'
+import { delay, Subject, takeUntil, tap } from 'rxjs'
 import { DATA_TYPE_LABELS, CustomField } from 'src/app/data/custom-field'
 import { PermissionsService } from 'src/app/services/permissions.service'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
@@ -28,6 +28,9 @@ export class CustomFieldsComponent
 {
   public fields: CustomField[] = []
 
+  public loading: boolean = true
+  public reveal: boolean = false
+
   private unsubscribeNotifier: Subject<any> = new Subject()
   constructor(
     private customFieldsService: CustomFieldsService,
@@ -47,9 +50,16 @@ export class CustomFieldsComponent
   reload() {
     this.customFieldsService
       .listAll()
-      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((r) => {
-        this.fields = r.results
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        tap((r) => {
+          this.fields = r.results
+        }),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.reveal = true
+        this.loading = false
       })
   }