Enhancement: improved loading visuals (#8435)

src-ui/src/app/components/manage/mail/mail.component.html

@@ -26,7 +26,7 @@
   </h4>
   <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>Server</div>
         <div class="col d-none d-sm-block" i18n>Username</div>
@@ -34,9 +34,16 @@
       </div>
     </li>
 
+    @if (loadingAccounts) {
+      <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 (account of mailAccounts; track account) {
       <li class="list-group-item">
-        <div class="row">
+        <div class="row" [class.reveal]="revealAccounts">
           <div class="col d-flex align-items-center">
             <button class="btn btn-link p-0 text-start" type="button" (click)="editMailAccount(account)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailAccount)">
               {{account.name}}@switch (account.account_type) {
@@ -76,7 +83,7 @@
         </div>
       </li>
     }
-    @if (mailAccounts.length === 0) {
+    @if (!loadingAccounts && mailAccounts.length === 0) {
       <li class="list-group-item" i18n>No mail accounts defined.</li>
     }
   </ul>
@@ -92,7 +99,7 @@
   </h4>
   <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 d-none d-sm-block" i18n>Sort Order</div>
         <div class="col" i18n>Account</div>
@@ -101,9 +108,16 @@
       </div>
     </li>
 
+    @if (loadingRules) {
+      <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 (rule of mailRules; track rule) {
       <li class="list-group-item">
-        <div class="row">
+        <div class="row" [class.reveal]="revealRules">
           <div class="col d-flex align-items-center"><button class="btn btn-link p-0 text-start" type="button" (click)="editMailRule(rule)" [disabled]="!permissionsService.currentUserCan(PermissionAction.Change, PermissionType.MailRule)">{{rule.name}}</button></div>
           <div class="col d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
           <div class="col d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
@@ -151,7 +165,7 @@
         </div>
       </li>
     }
-    @if (mailRules.length === 0) {
+    @if (!loadingRules && mailRules.length === 0) {
       <li class="list-group-item" i18n>No mail rules defined.</li>
     }
   </ul>

src-ui/src/app/components/manage/mail/mail.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/mail/mail.component.spec.ts

@@ -129,6 +129,8 @@ describe('MailComponent', () => {
     fixture = TestBed.createComponent(MailComponent)
     component = fixture.componentInstance
     fixture.detectChanges()
+    jest.useFakeTimers()
+    jest.advanceTimersByTime(100)
   })
 
   function completeSetup(excludeService = null) {
@@ -386,6 +388,7 @@ describe('MailComponent', () => {
     component.oAuthAccountId = 3
     const editSpy = jest.spyOn(component, 'editMailAccount')
     component.ngOnInit()
+    jest.advanceTimersByTime(200)
     expect(editSpy).toHaveBeenCalled()
   })
 })

src-ui/src/app/components/manage/mail/mail.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, OnDestroy } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
-import { Subject, first, takeUntil } from 'rxjs'
+import { Subject, delay, first, takeUntil, tap } from 'rxjs'
 import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
 import { MailAccount, MailAccountType } from 'src/app/data/mail-account'
 import { MailRule } from 'src/app/data/mail-rule'
@@ -47,6 +47,11 @@ export class MailComponent
     return this.settingsService.get(SETTINGS_KEYS.OUTLOOK_OAUTH_URL)
   }
 
+  public loadingRules: boolean = true
+  public revealRules: boolean = false
+  public loadingAccounts: boolean = true
+  public revealAccounts: boolean = false
+
   constructor(
     public mailAccountService: MailAccountService,
     public mailRuleService: MailRuleService,
@@ -62,9 +67,10 @@ export class MailComponent
   ngOnInit(): void {
     this.mailAccountService
       .listAll(null, null, { full_perms: true })
-      .pipe(first(), takeUntil(this.unsubscribeNotifier))
-      .subscribe({
-        next: (r) => {
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        tap((r) => {
           this.mailAccounts = r.results
           if (this.oAuthAccountId) {
             this.editMailAccount(
@@ -73,6 +79,13 @@ export class MailComponent
               )
             )
           }
+        }),
+        delay(100)
+      )
+      .subscribe({
+        next: () => {
+          this.loadingAccounts = false
+          this.revealAccounts = true
         },
         error: (e) => {
           this.toastService.showError(
@@ -84,10 +97,18 @@ export class MailComponent
 
     this.mailRuleService
       .listAll(null, null, { full_perms: true })
-      .pipe(first(), takeUntil(this.unsubscribeNotifier))
+      .pipe(
+        first(),
+        takeUntil(this.unsubscribeNotifier),
+        tap((r) => {
+          this.mailRules = r.results
+        }),
+        delay(100)
+      )
       .subscribe({
         next: (r) => {
-          this.mailRules = r.results
+          this.loadingRules = false
+          this.revealRules = true
         },
         error: (e) => {
           this.toastService.showError($localize`Error retrieving mail rules`, e)