Use app initializer to wait on settings

src-ui/src/app/app.module.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser'
-import { NgModule } from '@angular/core'
+import { APP_INITIALIZER, NgModule } from '@angular/core'
 import { AppRoutingModule } from './app-routing.module'
 import { AppComponent } from './app.component'
 import {
@@ -87,6 +87,8 @@ import localeSr from '@angular/common/locales/sr'
 import localeSv from '@angular/common/locales/sv'
 import localeTr from '@angular/common/locales/tr'
 import localeZh from '@angular/common/locales/zh'
+import { Observable } from 'rxjs'
+import { SettingsService } from './services/settings.service'
 
 registerLocaleData(localeBe)
 registerLocaleData(localeCs)
@@ -109,6 +111,12 @@ registerLocaleData(localeSv)
 registerLocaleData(localeTr)
 registerLocaleData(localeZh)
 
+function initializeApp(settings: SettingsService) {
+  return () => {
+    return settings.initializeSettings()
+  }
+}
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -174,6 +182,12 @@ registerLocaleData(localeZh)
     ColorSliderModule,
   ],
   providers: [
+    {
+      provide: APP_INITIALIZER,
+      useFactory: initializeApp,
+      deps: [SettingsService],
+      multi: true,
+    },
     DatePipe,
     CookieService,
     {

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

@@ -72,10 +72,6 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
   ngOnInit() {
     this.savedViewService.listAll().subscribe((r) => {
       this.savedViews = r.results
-      this.settings
-        .retrieveSettings()
-        .pipe(first())
-        .subscribe(() => {
       let storeData = {
         bulkEditConfirmationDialogs: this.settings.get(
           SETTINGS_KEYS.BULK_EDIT_CONFIRMATION_DIALOGS
@@ -140,10 +136,7 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
       })
 
       // Initialize dirtyCheck
-          this.isDirty$ = dirtyCheck(
+      this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
-            this.settingsForm,
-            this.store.asObservable()
-          )
 
       // Record dirty in case we need to 'undo' appearance settings if not saved on close
       this.isDirty$.subscribe((dirty) => {
@@ -159,7 +152,6 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
         )
       })
     })
-    })
   }
 
   ngOnDestroy() {

src-ui/src/app/services/settings.service.ts

@@ -139,7 +139,6 @@ export class SettingsService {
   protected baseUrl: string = environment.apiBaseUrl + 'frontend_settings/'
 
   private settings: Object = {}
-  private settings$: Observable<Results<any>>
 
   constructor(
     rendererFactory: RendererFactory2,
@@ -150,20 +149,15 @@ export class SettingsService {
     protected http: HttpClient
   ) {
     this.renderer = rendererFactory.createRenderer(null, null)
-
-    this.retrieveSettings()
-      .pipe(first())
-      .subscribe((response) => {
-        Object.assign(this.settings, response['settings'])
-
-        this.updateAppearanceSettings()
-      })
   }
 
-  public retrieveSettings(): Observable<Results<any>> {
+  // this is called by the app initializer in app.module
-    if (!this.settings$)
+  public initializeSettings(): Observable<Results<any>> {
-      this.settings$ = this.http.get<Results<any>>(this.baseUrl)
+    let settings$ = this.http.get<Results<any>>(this.baseUrl)
-    return this.settings$
+    settings$.pipe(first()).subscribe((response) => {
+      Object.assign(this.settings, response['settings'])
+    })
+    return settings$
   }
 
   public updateAppearanceSettings(