Splash screen delay

jigneshmistry24 · February 2, 2017, 2:08pm

Hello Team IONIC,

I need your help.

Follow is my config.xml code.

After the splashcreen it shows white screen and then the landing pages comes so, ho to make that white screen disappear totally ?

Any help is appreciated.

Thank You.

philipphalder · February 3, 2017, 1:12pm

i got the same problem here

dieasmaz · February 3, 2017, 3:20pm

i got the same problem, someone resolve this?

imediasolutions · February 3, 2017, 7:11pm

Apparently I can’t see your config.xml code, so appologize me if I’m wrong, but there are 2 settings you can play with:

increase splash screen duration
build your app with the --prod flag

Below are my splash screen settings:

config.xml:

<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
    <preference name="ShowSplashScreenSpinner" value="false" />
</platform>

dieasmaz · February 3, 2017, 7:48pm

Hello @imediasolutions thanks for replying, I comment, try to do what your comment says but it still does not work, it takes too long, I’ve seen that it could also be due to CSP but I do not know how to configure it.

I always get the error:

Deviceready has not fired in 5 seconds.
Main.js: 106975 Native: deviceready did not fire within 5000ms. This can happen when plugins are in an inconsistent state. Try removing plugins from and reinstalling them.
(Anonymous) @ main.js: 106975
T.invokeTask @ polyfills.js: 3
E.runTask @ polyfills.js: 3
Invoke @ polyfills.js: 3
E.args. (Anonymous function) @ polyfills.js: 2
Main.js: 106970 DEVICE READY FIRED AFTER 7473 ms

Already try to remove the platform, remove and reinstall the plugins but it does not work.

imediasolutions · February 3, 2017, 7:58pm

Can you post a list of the plugins and versions you are using? If you’re using the CLI, just type:

$ ionic plugin list

dieasmaz · February 3, 2017, 8:19pm

plugins

cordova-plugin-console 1.0.5 "Console"
cordova-plugin-device 1.1.4 "Device"
cordova-plugin-splashscreen 4.0.1 "Splashscreen"
cordova-plugin-statusbar 2.2.1 "StatusBar"
cordova-plugin-whitelist 1.3.1 "Whitelist"
ionic-plugin-keyboard 2.2.1 “Keyboard”

SO Windows 10 X64
cordova 6.5.0
ionic 2.2.1

javiccs · February 16, 2017, 8:44pm

Nice! This solved my problem

jigneshmistry24 · February 17, 2017, 5:02am

Can you share me the config.xml & other files which are related to slpash screen because i am still facing the same issue.

javiccs · February 17, 2017, 1:18pm

Sure! There is my config.xml

<preference name="loadUrlTimeoutValue" value="700000"/> <preference name="SplashMaintainAspectRatio" value="true" /> <preference name="SplashShowOnlyFirstTime" value="false" /> <preference name="SplashScreen" value="screen" /> <preference name="SplashScreenDelay" value="4000" /> <platform name="android"> <preference name="ShowSplashScreenSpinner" value="true" /> </platform>

But I solved this problem changing this command “ionic build android --release” for ‘ionic build android --prod’

let me know if this works for you

mrobinson · February 23, 2017, 2:25am

I’m using Ionic 2.0.1.

I’m seeing the blank white screen as well on my Android which runs 6.x. Here is the snippet from my config.xml file:

If I increase the SplashScreenDelay to 9000 then the blank white screen doesn’t show, but that’s way too long for the user to see my splashscreen and to wait. I also tried playing with the “–release” flag and “–prod” flag, but still same blank white screen issue if I go with a SplashScreenDelay of say 4000. The white screen does go away eventually and my app loads, but it’s not the ideal UX.

<preference name="loadUrlTimeoutValue" value="450000"/>
  <preference name="webviewbounce" value="false"/>
  <preference name="UIWebViewBounce" value="false"/>
  <preference name="DisallowOverscroll" value="true"/>
  <preference name="android-minSdkVersion" value="16"/>
  <preference name="BackupWebStorage" value="none"/>
  <preference name="SplashMaintainAspectRatio" value="true"/>
  <preference name="FadeSplashScreenDuration" value="300"/>
  <preference name="SplashShowOnlyFirstTime" value="false"/>
  <preference name="SplashScreen" value="screen"/>
  <preference name="SplashScreenDelay" value="4000"/>
  <preference name="ShowSplashScreenSpinner" value="true" />
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar"/>
  </feature>
  <plugin name="cordova-plugin-console" spec="1.0.5"/>
  <plugin name="cordova-plugin-device" spec="1.1.4"/>
  <plugin name="cordova-sqlite-storage" spec="~2.0.2"/>
  <plugin name="de.appplant.cordova.plugin.local-notification" spec="~0.8.4"/>
  <plugin name="cordova-plugin-camera" spec="~2.3.1"/>
  <plugin name="cordova-plugin-file" spec="~4.3.1"/>
  <plugin name="cordova-plugin-x-socialsharing" spec="~5.1.6"/>
  <plugin name="cordova-plugin-statusbar" spec="~2.2.1"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.1"/>
  <plugin name="cordova-plugin-whitelist" spec="~1.3.1"/>
  <plugin name="cordova-plugin-crosswalk-webview" spec="~2.3.0"/>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-inappbrowser" spec="~1.6.1"/>
  <icon src="resources\android\icon\drawable-xhdpi-icon.png"/>

javiccs · May 3, 2017, 3:50pm

I’m having again the same problem. did you solve it?

dieasmaz · May 3, 2017, 4:09pm

Hi, i’m try this:

In the config.xml i have this:

...........
 <preference name="webviewbounce" value="false" />
  <preference name="UIWebViewBounce" value="false" />
  <preference name="DisallowOverscroll" value="true" />
  <preference name="android-minSdkVersion" value="19" />
  <preference name="BackupWebStorage" value="none" />
  <preference name="SplashMaintainAspectRatio" value="true" />
  <preference name="FadeSplashScreenDuration" value="300" />
  <preference name="windows-target-version" value="10.0" />
  <preference name="SplashShowOnlyFirstTime" value="false" />
  <preference name="SplashScreen" value="screen" />
  <preference name="SplashScreenDelay" value="3000" />
  <feature name="StatusBar">
    <param name="ios-package" onload="true" value="CDVStatusBar" />
  </feature>
........

Remove the platform using cordova platform rm android|ios
Add the platform using cordova platform add android|ios @latest
Run the app using ionic run android|ios --prod --device

This work for me and i see answers about others saying that it work for them.

***Sorry but my english is not very good, i just want to help them.

HarinderSingh · May 3, 2017, 4:40pm

I will try this in my app too and let you know if it works fast or not!

dieasmaz · May 3, 2017, 5:10pm

What I answered solved my delay problem in the splash screen, my application loads faster and does not give me the problem of white screen after the splash screen. You can try this and post the result.

LoLStats · May 3, 2017, 5:13pm

I created a PR recently to set this values as default. The main Problem is the missing

<preference name="AutoHideSplashScreen" value="false"/>

field

javiccs · May 3, 2017, 5:39pm

this works for me to run on my device but not for google play.

rijwan1234 · December 22, 2017, 7:40am

Nice its work for me…

Dulmaheshi · January 19, 2018, 10:42am

Thank You…its work for me…

Sreekanth_Karini · February 19, 2018, 6:08am

Thank you soo… much, this worked for me and now my app opened within 3 seconds. i have been trying to fix this for long time but didn’t found a correct solution now this working. Thank you.

Topic		Replies	Views
I try to fix white splash screen on my app ionic-v3	2	1327	July 19, 2021
Ionic splash sreen delay and white screen after splash ionic-v3	9	12205	July 19, 2021
Long whitescreen at app launch ionic-v3	8	1554	June 15, 2017
White screen after splash and before app with Ionic React Ionic React	6	2294	January 5, 2023
White screen after splash screen ionic-v3	2	1867	July 19, 2021

Splash screen delay

Related topics