Ionic 3 browser splash screen / preloader

The Splash Screen component is available for a long time but only as Ionic Native component, so we can't use it inside browser. I will describe here my approach to create a browser compilant splash screen implementation for Ionic 3 based applications.

Step 1 - Initialization

Let's start by creating sample project according to the official docs.

ionic start splash-screen-ionic tabs

After answering a few simple questions (with "n" - for no) you should see the sample app.At this point please make sure that you've checked "Disable cache" in Chrome Dev Tools. It is required to view the results easily.
Now refresh browser tab with your App. You should see a "flash" of white screen before viewing actual App content.

Step 2 - Preloader

The splash screen should be simple and shouldn't require any images in order to load as fast as possible.

As an example let's use the Ionic theme primary color. In order to do so append this code to the src/app/app.scss file:

body {
background: color($colors, primary);
}

Now after refreshing the App you will see no white screen at all (it will be blue screen instead).
But wait it is just a background color change not a "real" splash screen!

Time to mess with some HTML. Nice HTML/CSS based "preloaders" may be found on the SpinKit project pages. I will use the fading-circle animation but feel free to select your own (you may, of course, change it later).
Open src/index.html and after <ion-app></ion-app> add following lines (please note that top <div> has an ID, it will be important):

Browser prefixes were omitted for brevity but you should copy entire code from mentioned SpinKit project page. It is available after clicking on "Source" link (on the top of the page).
Finally add some custom CSS to src/app/app.scss which will position the animation:

imports

First of all @ionic-nativeStatusBar and SplashScreen were removed because we are dealing with browser only app. This is also the reason why we can simplify MyApp constructor() method.

constructor()

As mentioned above, no need for native components.

handleSpashScreen()

This method will take advantage of async/await construction supported by the Ionic 3 Framework. Reading method code line by line:

We are waiting for App to be ready with await

Then we may execute some initialization related custom code

Finally #splash-screen should fade out and then it should be removed, timeout of 300 ms is not a general solution but in this case 200 ms animation is hardcoded into CSS, so it should be a reasonable value

The result (from Chrome Performance tab):

Evaluation

Is it any better than it was before #splash-screen modification?

Before adding the splash screen inside Chrome Performance tab we can see this:
So the App shows blank page for first 1100ms while splash screen "solution" should make an impression that something is going on just after ~300ms. For larger applications with much more JS (or slow GSM connections) this difference should be even larger.

Disclaimer

All tests were performed using local build and integrated webpack web server. So the results for Demo page accessed through the Internet should/may be different.