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

src-ui/src/app/services/rest/abstract-paperless-service.ts

@@ -1,7 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http'
 import { inject, Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
-import { map, publishReplay, refCount, tap } from 'rxjs/operators'
+import { map, shareReplay, tap } from 'rxjs/operators'
 import { ObjectWithId } from 'src/app/data/object-with-id'
 import { Results } from 'src/app/data/results'
 import { environment } from 'src/environments/environment'
@@ -90,7 +90,7 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
         sortField,
         sortReverse,
         extraParams
-      ).pipe(publishReplay(1), refCount())
+      ).pipe(shareReplay({ bufferSize: 1, refCount: true }))
     }
     return this._listAll
   }