Enhancement: improved loading visuals (#8435)

src-ui/src/app/components/manage/management-list/management-list.component.html

@@ -53,7 +53,7 @@
         </tr>
       }
       @for (object of data; track object) {
-        <tr (click)="toggleSelected(object); $event.stopPropagation();">
+        <tr (click)="toggleSelected(object); $event.stopPropagation();" class="data-row" [class.reveal]="reveal">
           <td>
             <div class="form-check m-0 ms-2 me-n2">
               <input type="checkbox" class="form-check-input" id="{{typeName}}{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">

src-ui/src/app/components/manage/management-list/management-list.component.scss

@@ -10,3 +10,12 @@ tbody tr:last-child td {
 .form-check {
     min-height: 0;
 }
+
+.data-row {
+    opacity: 0;
+    transition: opacity .2s;
+}
+
+.reveal {
+    opacity: 1;
+}

src-ui/src/app/components/manage/management-list/management-list.component.spec.ts

@@ -150,6 +150,7 @@ describe('ManagementListComponent', () => {
     fixture.detectChanges()
     expect(component.nameFilter).toBeNull()
     expect(component.data).toEqual(tags)
+    tick(100) // load
   }))
 
   it('should support create, show notification on error / success', () => {

src-ui/src/app/components/manage/management-list/management-list.component.ts

@@ -7,7 +7,13 @@ import {
 } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { Subject } from 'rxjs'
-import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators'
+import {
+  debounceTime,
+  delay,
+  distinctUntilChanged,
+  takeUntil,
+  tap,
+} from 'rxjs/operators'
 import {
   MatchingModel,
   MATCHING_ALGORITHMS,
@@ -89,6 +95,8 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
   public selectedObjects: Set<number> = new Set()
   public togggleAll: boolean = false
 
+  public reveal: boolean = false
+
   ngOnInit(): void {
     this.reloadData()
 
@@ -132,7 +140,7 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
     this.reloadData()
   }
 
-  reloadData() {
+  reloadData(extraParams: { [key: string]: any } = null) {
     this.isLoading = true
     this.clearSelection()
     this.service
@@ -142,12 +150,19 @@ export abstract class ManagementListComponent<T extends ObjectWithId>
         this.sortField,
         this.sortReverse,
         this._nameFilter,
-        true
+        true,
+        extraParams
       )
-      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe((c) => {
-        this.data = c.results
-        this.collectionSize = c.count
+      .pipe(
+        takeUntil(this.unsubscribeNotifier),
+        tap((c) => {
+          this.data = c.results
+          this.collectionSize = c.count
+        }),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.reveal = true
         this.isLoading = false
       })
   }