Search code examples
ionic-frameworkionic2apkionic3

White screen after splash screen in IONIC app

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();
});