Angular hide splash screen after resolve service done

user_69433 0
Viewed 233

In my Angular 12 app I am using splash screen as div inside app-root.

<app-root>
   <div class="splash-screen">
        
    </div>
</app-root>

In router module forRoot path I am calling service to resolve data before display main component.

RouterModule.forRoot([
            {
                path: '', component: AppMainComponent,
                resolve: {userInfo: userInfoResolver},

In my main component I am using that data

 ngOnInit() {
        this.route.data.subscribe(
            (data: Data) => {
                 this.userInfo=data['userInfo'];
            }
        );
    }

Service which fetching user Info running for few seconds, in that time splash screen is already gone and page is white without content.

My question is: How I can hide splash screen after fetching userInfo in ngOnInit method ? Where did I make mistake in defining splash screen or in way I prepare data for main component in resolve ?

angular-routing angular
1 Answers

Use splash screen this way for showing it completely customizable -

In index.html -

<my-app></my-app>
<div id="splashScreen"></div>

Add some styles in global styles (as per requirement) -

#splashScreen{
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red; /* change as per need */
}

And then remove the splash screen from anywhere in the app -

      constructor(private renderer: Renderer2) {}
    
      hideSplashScreen() {
        let splash = this.renderer.selectRootElement('#splashScreen');
        if (splash.style.display != 'none') splash.style.display = 'none';
      }

Working demo here.

user_118225560
Related