From 03e1e468bd09d309012024167bb60ba09a57d3b4 Mon Sep 17 00:00:00 2001
From: Yura Bondarenko <yura.bondarenko@atmire.com>
Date: Fri, 27 May 2022 17:11:14 +0200
Subject: [PATCH] 91770: Fix route-matching themes not resolving on first
 load/refresh

---
 src/app/app.component.ts | 57 +++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6aa569d8e6..818a38d34f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -12,6 +12,7 @@ import {
 } from '@angular/core';
 import {
   ActivatedRouteSnapshot,
+  ActivationEnd,
   NavigationCancel,
   NavigationEnd,
   NavigationStart, ResolveEnd,
@@ -196,30 +197,30 @@ export class AppComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    let resolveEndFound = false;
+    let updatingTheme = false;
+    let snapshot: ActivatedRouteSnapshot;
+
     this.router.events.subscribe((event) => {
       if (event instanceof NavigationStart) {
-        resolveEndFound = false;
+        updatingTheme = false;
         this.distinctNext(this.isRouteLoading$, true);
-      } else  if (event instanceof ResolveEnd) {
-        resolveEndFound = true;
-        const activatedRouteSnapShot: ActivatedRouteSnapshot = event.state.root;
-        this.themeService.updateThemeOnRouteChange$(event.urlAfterRedirects, activatedRouteSnapShot).pipe(
-          switchMap((changed) => {
-            if (changed) {
-              return this.isThemeCSSLoading$;
-            } else {
-              return [false];
-            }
-          })
-        ).subscribe((changed) => {
-          this.distinctNext(this.isThemeLoading$, changed);
-        });
-      } else if (
-        event instanceof NavigationEnd ||
-        event instanceof NavigationCancel
-      ) {
-        if (!resolveEndFound) {
+      } else if (event instanceof ResolveEnd) {
+        // this is the earliest point where we have all the information we need
+        // to update the theme, but this event is not emitted on first load
+        this.updateTheme(event.urlAfterRedirects, event.state.root);
+        updatingTheme = true;
+      } else if (!updatingTheme && event instanceof ActivationEnd) {
+        // if there was no ResolveEnd, keep track of the snapshot...
+        snapshot = event.snapshot;
+      } else if (event instanceof NavigationEnd) {
+        if (!updatingTheme) {
+          // ...and use it to update the theme on NavigationEnd instead
+          this.updateTheme(event.urlAfterRedirects, snapshot);
+          updatingTheme = true;
+        }
+        this.distinctNext(this.isRouteLoading$, false);
+      } else if (event instanceof NavigationCancel) {
+        if (!updatingTheme) {
           this.distinctNext(this.isThemeLoading$, false);
         }
         this.distinctNext(this.isRouteLoading$, false);
@@ -227,6 +228,20 @@ export class AppComponent implements OnInit, AfterViewInit {
     });
   }
 
+  private updateTheme(urlAfterRedirects: string, snapshot: ActivatedRouteSnapshot): void {
+    this.themeService.updateThemeOnRouteChange$(urlAfterRedirects, snapshot).pipe(
+      switchMap((changed) => {
+        if (changed) {
+          return this.isThemeCSSLoading$;
+        } else {
+          return [false];
+        }
+      })
+    ).subscribe((changed) => {
+      this.distinctNext(this.isThemeLoading$, changed);
+    });
+  }
+
   @HostListener('window:resize', ['$event'])
   public onResize(event): void {
     this.dispatchWindowSize(event.target.innerWidth, event.target.innerHeight);