Enhancement: improved loading visuals (#8435)

src-ui/src/app/components/admin/trash/trash.component.html

@@ -47,7 +47,7 @@
                 </tr>
             }
             @for (document of documentsInTrash; track document.id) {
-                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()">
+                <tr (click)="toggleSelected(document); $event.stopPropagation();" (mouseleave)="popupPreview.close()" 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="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">

src-ui/src/app/components/admin/trash/trash.component.scss

@@ -0,0 +1,8 @@
+.data-row {
+    opacity: 0;
+    transition: opacity .2s;
+}
+
+.reveal {
+    opacity: 1;
+}

src-ui/src/app/components/admin/trash/trash.component.spec.ts

@@ -69,6 +69,7 @@ describe('TrashComponent', () => {
   })
 
   it('should call correct service method on reload', () => {
+    jest.useFakeTimers()
     const trashSpy = jest.spyOn(trashService, 'getTrash')
     trashSpy.mockReturnValue(
       of({
@@ -78,6 +79,7 @@ describe('TrashComponent', () => {
       })
     )
     component.reload()
+    jest.advanceTimersByTime(100)
     expect(trashSpy).toHaveBeenCalled()
     expect(component.documentsInTrash).toEqual(documentsInTrash)
   })

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -4,7 +4,7 @@ import { Document } from 'src/app/data/document'
 import { ToastService } from 'src/app/services/toast.service'
 import { TrashService } from 'src/app/services/trash.service'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
-import { Subject, takeUntil } from 'rxjs'
+import { delay, Subject, takeUntil, tap } from 'rxjs'
 import { SettingsService } from 'src/app/services/settings.service'
 import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
 import { Router } from '@angular/router'
@@ -21,6 +21,7 @@ export class TrashComponent implements OnDestroy {
   public page: number = 1
   public totalDocuments: number
   public isLoading: boolean = false
+  public reveal: boolean = false
   unsubscribeNotifier: Subject<void> = new Subject()
 
   constructor(
@@ -40,12 +41,20 @@ export class TrashComponent implements OnDestroy {
 
   reload() {
     this.isLoading = true
-    this.trashService.getTrash(this.page).subscribe((r) => {
-      this.documentsInTrash = r.results
-      this.totalDocuments = r.count
-      this.isLoading = false
-      this.selectedDocuments.clear()
-    })
+    this.trashService
+      .getTrash(this.page)
+      .pipe(
+        tap((r) => {
+          this.documentsInTrash = r.results
+          this.totalDocuments = r.count
+          this.selectedDocuments.clear()
+        }),
+        delay(100)
+      )
+      .subscribe(() => {
+        this.reveal = true
+        this.isLoading = false
+      })
   }
 
   delete(document: Document) {