Ionic 3 long white screen after splash - ionic-framework

Question

Is there a way to get it as soon as i start my application and after that i get the login screen, and get ride of the SplashScreen.
Or a way to modify something so my animation become my SplashScreen ?
Thank you.

Answer 1

Put a longer timeout in your config.xml and disable it yourself when your home screen is loaded.
config.xml
<preference name="SplashScreenDelay" value="30000" />
app.component.ts
platform.ready().then(() => {
splashScreen.hide();
});

Answer 2

Ionic hides the splash screen as default, so if the splash is hidden but the main application is not ready yet or the home page still loads some data, you will find the white screen!.
The suggested solution (control hiding the splash screen):
Disable hiding the splash screen by default from config preferences.
Hide it manually splashScreen.hide(); when you want to hide it
either when the platform is ready or inside the home page controller.
config.xml
<preference name="AutoHideSplashScreen" value="false" />
app.component.ts OR home.page.ts
platform.ready().then(() => {
splashScreen.hide();
});

Answer 3

You can run/ build your application in production mode.
For Android Build, e.g: ionic cordova build android --prod
For Android Run, e.g: ionic cordova run android --prod
Build using ionic cordova cli
Run using ionic cordova cli

Answer 4

The best Solution I tested now is :
config.xml:
//Put a long time for splash screen delay to avoid that the splash screen hides and the interface become white:
<preference name="SplashScreenDelay" value="50000" />
//just animation duration before being hided
<preference name="FadeSplashScreenDuration" value="800" />
app.component.ts
constructor(
public platform: Platform,
public statusBar: StatusBar,
public splashScreen: SplashScreen
){
// ensure that the interface is loaded by adding 500ms or less before hiding the splash screen manually
this.platform.ready().then(() => {
setTimeout(() => {
this.splashScreen.hide();
}, 500);
});
}