White screen after splash screen in IONIC app

Question

I have a "problem" with my app. When it's running, after the splash screen and before the app is ready, a white screen appears for about 5/6 seconds and it's so annoying. How is it possible to avoid this white screen?

I didn't see a lot of questions about this (without working answers) and I would like to have an updated answer. I don't post code because I don't know which code could be useful.

Ionic version 3.13.2

Thank you.

Solution

This may be due to the fact that your application takes longer to load than the duration of the splahscreen.

In your config.xml file you may have something like:

<preference name="SplashScreenDelay" value="3000" />

That means that the splashscreen will automatically fade out after 3 seconds. However, if your app is not ready after that time, you will see a white screen while your app finishes loading.

The solution is to set a longer time for your splashscreen and to also turn off AutohideSplashScreen. In the config.xml file:

<preference name="AutohideSplashScreen" value="false" />
<preference name="SplashScreenDelay" value="30000" />

Then you need to make sure that you turn the splashscreen off from inside your app, as soon as your app is ready.

Typically in the app.component.ts class constructor:

this.platform.ready().then(() => {
  this.splashScreen.hide();
});

Comments

[glemiere]

What does the console tells you ?

[JEricaM]

nothing. I use the apk on my mobile phone and I saw the white screen when I'm running on the device.

[Jeyakeethan Geethan]

You may correct this with this solution. It worked for me. stackoverflow.com/questions/46834302/…

[Developer Thing]

Thank you, great answer!

[Sébastien]

@SHUBHASISMAHATA This is incorrect, I created a new Ionic 5 / Cordova project and it still works the same.