Dynamically load mail rules / accounts settings

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

@@ -227,7 +227,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="4">
+    <li [ngbNavItem]="SettingsNavIDs.Mail" (mouseover)="maybeInitializeTab(SettingsNavIDs.Mail)" (focusin)="maybeInitializeTab(SettingsNavIDs.Mail)">
       <a ngbNavLink i18n>Mail</a>
       <ng-template ngbNavContent>
 
@@ -257,7 +257,6 @@
                     </div>
                   </div>
                 </div>
-              </div>
               </li>
 
               <div *ngIf="mailAccounts.length == 0" i18n>No mail accounts defined.</div>
@@ -288,11 +287,16 @@
                     </div>
                   </div>
                 </div>
-              </div>
               </li>
 
               <div *ngIf="mailRules.length == 0" i18n>No mail rules defined.</div>
           </ul>
+        </ng-container>
+
+        <div *ngIf="!mailAccounts || !mailRules">
+          <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+          <div class="visually-hidden" i18n>Loading...</div>
+        </div>
 
       </ng-template>
     </li>

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

@@ -196,6 +196,18 @@ export class SettingsComponent
         this.savedViews = r.results
         this.initialize()
       })
+    } else if (
+      (navID == SettingsNavIDs.Mail && !this.mailAccounts) ||
+      !this.mailRules
+    ) {
+      this.mailAccountService.listAll().subscribe((r) => {
+        this.mailAccounts = r.results
+
+        this.mailRuleService.listAll().subscribe((r) => {
+          this.mailRules = r.results
+          this.initialize()
+        })
+      })
     }
   }
 
@@ -224,6 +236,7 @@ export class SettingsComponent
       }
     }
 
+    if (this.mailAccounts && this.mailRules) {
       for (let account of this.mailAccounts) {
         storeData.mailAccounts[account.id.toString()] = {
           id: account.id,
@@ -293,6 +306,7 @@ export class SettingsComponent
           })
         )
       }
+    }
 
     this.store = new BehaviorSubject(storeData)
 

src-ui/src/app/services/rest/mail-account.service.ts

@@ -13,7 +13,6 @@ export class MailAccountService extends AbstractPaperlessService<PaperlessMailAc
 
   constructor(http: HttpClient) {
     super(http, 'mail_accounts')
-    this.reload()
   }
 
   private reload() {

src-ui/src/app/services/rest/mail-rule.service.ts

@@ -13,7 +13,6 @@ export class MailRuleService extends AbstractPaperlessService<PaperlessMailRule>
 
   constructor(http: HttpClient) {
     super(http, 'mail_rules')
-    this.reload()
   }
 
   private reload() {