hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Yura Bondarenko
2022-05-27 17:11:14 +02:00
parent c834f8a075
commit 03e1e468bd
1 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/app.component.ts
View File

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