CODEWITHSUNDEEP
ionic-frameworkionic3
Taieb
Taieb

Reputation: 920

Ionic 3 long white screen after splash

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.

Upvotes: 1

Views: 5571

Answers (4)

Berk Akkerman
Berk Akkerman

Reputation: 483

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):

  1. Disable hiding the splash screen by default from config preferences.
  2. 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();
});

Upvotes: 1

Med Karim Garali
Med Karim Garali

Reputation: 943

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

        });
    }

Upvotes: 0

Chintan Dave
Chintan Dave

Reputation: 11

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

Upvotes: 0

nosTa
nosTa

Reputation: 653

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

Upvotes: 2

Related Questions