dynamic loading of settings tab contents

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

@@ -5,8 +5,8 @@
 <!-- <p>items per page, documents per view type</p> -->
 <form [formGroup]="settingsForm" (ngSubmit)="saveSettings()">
 
-  <ul ngbNav #nav="ngbNav" class="nav-tabs">
+  <ul ngbNav #nav="ngbNav" (navChange)="maybeInitializeTab($event)" [(activeId)]="activeNavID" class="nav-tabs">
-    <li [ngbNavItem]="1">
+    <li [ngbNavItem]="SettingsNavIDs.General">
       <a ngbNavLink i18n>General</a>
       <ng-template ngbNavContent>
 
@@ -162,7 +162,7 @@
       </ng-template>
     </li>
 
-    <li [ngbNavItem]="2">
+    <li [ngbNavItem]="SettingsNavIDs.Notifications">
       <a ngbNavLink i18n>Notifications</a>
       <ng-template ngbNavContent>
 
@@ -180,7 +180,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>
 
@@ -210,7 +210,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>
 

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

@@ -30,6 +30,16 @@ import { ActivatedRoute } from '@angular/router'
 import { ViewportScroller } from '@angular/common'
 import { TourService } from 'ngx-ui-tour-ng-bootstrap'
 import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+import { NgbNavChangeEvent } from '@ng-bootstrap/ng-bootstrap'
+import { Results } from 'src/app/data/results'
+
+enum SettingsNavIDs {
+  General = 1,
+  Notifications = 2,
+  SavedViews = 3,
+  Mail = 4,
+  UsersGroups = 5,
+}
 
 @Component({
   selector: 'app-settings',
@@ -40,6 +50,9 @@ export class SettingsComponent
   extends ComponentWithPermissions
   implements OnInit, AfterViewInit, OnDestroy, DirtyComponent
 {
+  SettingsNavIDs = SettingsNavIDs
+  activeNavID: number
+
   savedViewGroup = new FormGroup({})
 
   settingsForm = new FormGroup({
@@ -150,17 +163,28 @@ export class SettingsComponent
   }
 
   ngOnInit() {
+    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() {
     this.unsubscribeNotifier.next(true)
 
     let storeData = this.getCurrentSettings()
 
+    if (this.savedViews) {
       for (let view of this.savedViews) {
         storeData.savedViews[view.id.toString()] = {
           id: view.id,
@@ -178,6 +202,7 @@ export class SettingsComponent
           })
         )
       }
+    }
 
     this.store = new BehaviorSubject(storeData)