CODEWITHSUNDEEP
ionic-frameworkionic2apkionic3
JEricaM
JEricaM

Reputation: 824

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.

Upvotes: 2

Views: 11629

Answers (1)

Sébastien
Sébastien

Reputation: 12139

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

Upvotes: 16

Related Questions