91770: Fix route-matching themes not resolving on first load/refresh

This commit is contained in:
Yura Bondarenko
2022-05-27 17:11:14 +02:00
parent c834f8a075
commit 03e1e468bd

View File

@@ -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);