fix(platform-server): wait for async app initializers to complete before removing server side styles (#16712)
This fixes a flicker when transitioning from server rendered page to client rendered page in lazy loaded routes by waiting for the lazy loaded route to finish loading, assuming initialNavigation on the route is set to 'enabled'. Fixes #15716
This commit is contained in:
@ -24,23 +24,48 @@ export const APP_INITIALIZER = new InjectionToken<Array<() => void>>('Applicatio
|
||||
*/
|
||||
@Injectable()
|
||||
export class ApplicationInitStatus {
|
||||
private resolve: Function;
|
||||
private reject: Function;
|
||||
private initialized = false;
|
||||
private _donePromise: Promise<any>;
|
||||
private _done = false;
|
||||
|
||||
constructor(@Inject(APP_INITIALIZER) @Optional() appInits: (() => any)[]) {
|
||||
constructor(@Inject(APP_INITIALIZER) @Optional() private appInits: (() => any)[]) {
|
||||
this._donePromise = new Promise((res, rej) => {
|
||||
this.resolve = res;
|
||||
this.reject = rej;
|
||||
});
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
runInitializers() {
|
||||
if (this.initialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
const asyncInitPromises: Promise<any>[] = [];
|
||||
if (appInits) {
|
||||
for (let i = 0; i < appInits.length; i++) {
|
||||
const initResult = appInits[i]();
|
||||
|
||||
const complete =
|
||||
() => {
|
||||
this._done = true;
|
||||
this.resolve();
|
||||
}
|
||||
|
||||
if (this.appInits) {
|
||||
for (let i = 0; i < this.appInits.length; i++) {
|
||||
const initResult = this.appInits[i]();
|
||||
if (isPromise(initResult)) {
|
||||
asyncInitPromises.push(initResult);
|
||||
}
|
||||
}
|
||||
}
|
||||
this._donePromise = Promise.all(asyncInitPromises).then(() => { this._done = true; });
|
||||
|
||||
Promise.all(asyncInitPromises).then(() => { complete(); }).catch(e => { this.reject(e); });
|
||||
|
||||
if (asyncInitPromises.length === 0) {
|
||||
this._done = true;
|
||||
complete();
|
||||
}
|
||||
this.initialized = true;
|
||||
}
|
||||
|
||||
get done(): boolean { return this._done; }
|
||||
|
@ -302,6 +302,7 @@ export class PlatformRef_ extends PlatformRef {
|
||||
ngZone !.onError.subscribe({next: (error: any) => { exceptionHandler.handleError(error); }});
|
||||
return _callAndReportToErrorHandler(exceptionHandler, () => {
|
||||
const initStatus: ApplicationInitStatus = moduleRef.injector.get(ApplicationInitStatus);
|
||||
initStatus.runInitializers();
|
||||
return initStatus.donePromise.then(() => {
|
||||
this._moduleDoBootstrap(moduleRef);
|
||||
return moduleRef;
|
||||
|
Reference in New Issue
Block a user