authorization - How to prevent angular from briefly showing page when using RouteGuard?

Question

We are currently using an angular route guard and Cognito Hosted UI to protect routes when the user is not authenticated. This works great, but I am trying to prevent the page from showing at all until the redirect/oauth flow is completed.

The way it is now: When url of the application is hit, the page shows for maybe 1/2 to 1 second and then redirects to hosted ui. User signs in and it redirects back to the page.

I am trying to prevent the page from showing for that brief 1/2 - 1 second so that nothing can be seen (just a blank white page) until the user is authorized.

Here's the code example that doesn't do the job:

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    
    return new Promise<boolean>((resolve, reject) => {
        this.authenticationService.isAuthenticated()
        .catch((error: any) => {
            reject(error);
        })
        .then((result: boolean) => {
            if (!result) {
                window.location.href = this.authenticationService.getCognitoLoginUrl();
            }
            resolve(result);
        })
    });
}

Answer 1

等待大神答复