From e0aee1f5671cc9fe0649a371a08987c117490aab Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sat, 12 Nov 2022 14:46:57 -0800
Subject: [PATCH] dynamic loading of settings tab contents

---
 .../manage/settings/settings.component.html   | 15 +++--
 .../manage/settings/settings.component.ts     | 67 ++++++++++++-------
 2 files changed, 51 insertions(+), 31 deletions(-)

diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html
index 9fb301828..ca7c0e9f2 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -10,8 +10,8 @@
 
 <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
 
-  <ul ngbNav #nav="ngbNav" class="nav-tabs">
-    <li [ngbNavItem]="1">
+  <ul ngbNav #nav="ngbNav" (navChange)="maybeInitializeTab($event)" [(activeId)]="activeNavID" class="nav-tabs">
+    <li [ngbNavItem]="SettingsNavIDs.General">
       <a ngbNavLink i18n>General</a>
       <ng-template ngbNavContent>
 
@@ -167,7 +167,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="2">
+    <li [ngbNavItem]="SettingsNavIDs.Notifications">
       <a ngbNavLink i18n>Notifications</a>
       <ng-template ngbNavContent>
 
@@ -185,7 +185,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="3">
+    <li [ngbNavItem]="SettingsNavIDs.SavedViews" (mouseover)="maybeInitializeTab(SettingsNavIDs.SavedViews)" (focusin)="maybeInitializeTab(SettingsNavIDs.SavedViews)">
       <a ngbNavLink i18n>Saved views</a>
       <ng-template ngbNavContent>
 
@@ -215,7 +215,12 @@
               </div>
             </div>
 
-            <div *ngIf="savedViews.length == 0" i18n>No saved views defined.</div>
+            <div *ngIf="savedViews && savedViews.length == 0" i18n>No saved views defined.</div>
+
+            <div *ngIf="!savedViews">
+              <div class="spinner-border spinner-border-sm fw-normal ms-2 me-auto" role="status"></div>
+              <div class="visually-hidden" i18n>Loading...</div>
+            </div>
 
         </div>
 
diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts
index 6f68f04df..7fed7561e 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -37,6 +37,15 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { MailAccountEditDialogComponent } from '../../common/edit-dialog/mail-account-edit-dialog/mail-account-edit-dialog.component'
 import { MailRuleEditDialogComponent } from '../../common/edit-dialog/mail-rule-edit-dialog/mail-rule-edit-dialog.component'
 import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+
+enum SettingsNavIDs {
+  General = 1,
+  Notifications = 2,
+  SavedViews = 3,
+  Mail = 4,
+  UsersGroups = 5,
+}
 
 @Component({
   selector: 'app-settings',
@@ -46,6 +55,9 @@ import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dial
 export class SettingsComponent
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
+  SettingsNavIDs = SettingsNavIDs
+  activeNavID: number
+
   savedViewGroup = new FormGroup({})
 
   mailAccountGroup = new FormGroup({})
@@ -171,19 +183,20 @@ export class SettingsComponent
   }
 
   ngOnInit() {
-    this.savedViewService.listAll().subscribe((r) => {
-      this.savedViews = r.results
+    this.initialize()
+  }
 
-      this.mailAccountService.listAll().subscribe((r) => {
-        this.mailAccounts = r.results
-
-        this.mailRuleService.listAll().subscribe((r) => {
-          this.mailRules = r.results
-
-          this.initialize()
-        })
+  // Load tab contents 'on demand', either on mouseover or focusin (i.e. before click) or on nav change event
+  maybeInitializeTab(navIDorEvent: number | NgbNavChangeEvent): void {
+    const navID =
+      typeof navIDorEvent == 'number' ? navIDorEvent : navIDorEvent.nextId
+    // initialize saved views
+    if (navID == SettingsNavIDs.SavedViews && !this.savedViews) {
+      this.savedViewService.listAll().subscribe((r) => {
+        this.savedViews = r.results
+        this.initialize()
       })
-    })
+    }
   }
 
   initialize() {
@@ -191,22 +204,24 @@ export class SettingsComponent
 
     let storeData = this.getCurrentSettings()
 
-    for (let view of this.savedViews) {
-      storeData.savedViews[view.id.toString()] = {
-        id: view.id,
-        name: view.name,
-        show_on_dashboard: view.show_on_dashboard,
-        show_in_sidebar: view.show_in_sidebar,
+    if (this.savedViews) {
+      for (let view of this.savedViews) {
+        storeData.savedViews[view.id.toString()] = {
+          id: view.id,
+          name: view.name,
+          show_on_dashboard: view.show_on_dashboard,
+          show_in_sidebar: view.show_in_sidebar,
+        }
+        this.savedViewGroup.addControl(
+          view.id.toString(),
+          new FormGroup({
+            id: new FormControl(null),
+            name: new FormControl(null),
+            show_on_dashboard: new FormControl(null),
+            show_in_sidebar: new FormControl(null),
+          })
+        )
       }
-      this.savedViewGroup.addControl(
-        view.id.toString(),
-        new FormGroup({
-          id: new FormControl(null),
-          name: new FormControl(null),
-          show_on_dashboard: new FormControl(null),
-          show_in_sidebar: new FormControl(null),
-        })
-      )
     }
 
     for (let account of this.mailAccounts) {