How to set up a proper splash screen on Angular 6?

user_7102631 0
Viewed 5122

Been trying to set up a Splash screen to show up before my login fully loads. This is my 'login.component.html'.

<my-splash-page> </my-splash-page>
<div class="">
  <header >
    <ul>
      <li>
 ....

Now what the splash component should contain is what I'm clueless about, i've tried using some Subscription values but it doesn't quite work.

this.subscription = this.splashService.splashState
      .subscribe((state: LoaderState) => {
        this.show = state.show;
      });

The show variable should determine if it appears or not.

It's a somewhat fancy login so it'll take a couple of seconds to load the images but testing on 3G network I can clearly see the splash component dissapearing before the images in there fully or even start to load.

The splash screen shoud dissapear after everything is loaded (pictures, fonts, icons) but can't get it to work that way.

angular splash-screen
1 Answers

Instead of adding in login.html, you can add a div with splashscreen class which will display splashscreen image inside index.html. 

<div class="splashScreenClass" id="splashScreenClass">
    <h1>Loading...</h1>
</div>

In app.component.ts

You can remove from the DOM.

ngOnInit(){
  const splashScreen: HTMLElement = document.getElementById('splashScreenClass');
    if (splashScreen) {
      splashScreen.remove();
    }
}
user_101549510
Related