Fix: prevent infinite loading crash in mail component (#11978)

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

@@ -129,7 +129,7 @@
         <div class="row fade" [class.show]="showRules">
           <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) || !userCanEdit(rule)">{{rule.name}}</button></div>
           <div class="col-1 d-flex align-items-center d-none d-sm-flex">{{rule.order}}</div>
-          <div class="col-2 d-flex align-items-center">{{(mailAccountService.getCached(rule.account) | async)?.name}}</div>
+          <div class="col-2 d-flex align-items-center">{{ mailAccountsById.get(rule.account)?.name }}</div>
           <div class="col-2 d-flex align-items-center d-none d-sm-flex">
             <div class="form-check form-switch mb-0">
               <input #inputField type="checkbox" class="form-check-input cursor-pointer" [id]="rule.id+'_enable'" [(ngModel)]="rule.enabled" (change)="onMailRuleEnableToggled(rule)" *pngxIfPermissions="{ action: PermissionAction.Change, type: PermissionType.MailRule }">

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

@@ -1,4 +1,3 @@
-import { AsyncPipe } from '@angular/common'
 import { Component, OnDestroy, OnInit, inject } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ActivatedRoute } from '@angular/router'
@@ -37,7 +36,6 @@ import { ProcessedMailDialogComponent } from './processed-mail-dialog/processed-
     PageHeaderComponent,
     IfPermissionsDirective,
     IfOwnerDirective,
-    AsyncPipe,
     FormsModule,
     ReactiveFormsModule,
     NgbDropdownModule,
@@ -48,8 +46,8 @@ export class MailComponent
   extends ComponentWithPermissions
   implements OnInit, OnDestroy
 {
-  mailAccountService = inject(MailAccountService)
-  mailRuleService = inject(MailRuleService)
+  private readonly mailAccountService = inject(MailAccountService)
+  private readonly mailRuleService = inject(MailRuleService)
   private toastService = inject(ToastService)
   private modalService = inject(NgbModal)
   permissionsService = inject(PermissionsService)
@@ -58,8 +56,19 @@ export class MailComponent
 
   public MailAccountType = MailAccountType
 
-  mailAccounts: MailAccount[] = []
-  mailRules: MailRule[] = []
+  private _mailAccounts: MailAccount[] = []
+
+  public get mailAccounts() {
+    return this._mailAccounts
+  }
+  private set mailAccounts(accounts: MailAccount[]) {
+    this._mailAccounts = accounts
+    this.mailAccountsById = new Map(
+      accounts.map((account) => [account.id, account])
+    )
+  }
+  public mailAccountsById: Map<number, MailAccount> = new Map()
+  public mailRules: MailRule[] = []
 
   unsubscribeNotifier: Subject<any> = new Subject()
   oAuthAccountId: number