Long-Time White-Screen displays everytime app starts, and it's confusing !! :\

[tomavic]

Since Ionic 2 rise up, and with releasing Ionic 3, I noticed after building the app to Android or iOS and installing it on device properly, I found that there is a White screen showing up for like 4 or 6 seconds, then comes the splash screen and the rest of the app.

It's been so hard for me to convince the clients that they have to accept the app as it is, although that issue was NOT exists in Ionic 1.x !!

Previously, In Ionic 1.x when you start plain project form scratch and build it (for example Android), installing it to device, and If you open it you will meet the splash screen then the rest of the app etc...
and that was Awesome

Please could you look into this and take care of it in Ionic 4.x series ASAP :)

Ionic version:
[ ] 2.x
[*] 3.x
[ ] 4.x

I'm submitting a ... actually I don't know if it's really an issue need to be fixed, or a feature to be requested !
[] bug report
[ ] feature request

Current behavior:
White screen showing up after opening the apk, for like 3-6 seconds

Expected behavior:
NOT displaying that white screen, or at least decreasing it's time to be less than 1000ms and not more than that. That would be the worst case btw

Other information:
Even using CrossWalk doesn't make any difference

Ionic info:

cli packages: (C:\Users\Hatem\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.1
    ionic (Ionic CLI) : 3.19.1

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.8
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.10.0
    npm               : 5.5.1
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\Hatem\AppData\Local\Android\sdk1

Misc:

    backend : pro

[newuser44]

I have not seen an app have a white screen BEFORE the splash screen.
This happens on both ios and android?

I assume your config.xml has the normal splash screen settings?

[tomavic]

@newuser44

You could start new project by running ionic start myApp tabs
then build it to Android or iOS
then run it on your device Android/iOS
you'll find what I am talking about exaclty
A white screen lasts for 5 seconds, then splash screen, then next page whatever it is

[kensodemann]

@tomavic - I have not seen that either and I have several test apps built in a similar fashion as to what you have stated in your above comment just due to testing things.

What I have noticed with regard to this is that on some cheaper Android devices there will be a period of a grey screen between the splash and the app, but never before the splash.

Here is a link showing what I see when launching an Ionic app from my phone: https://drive.google.com/file/d/1-D79urp1Gfhtruxr7RQ8x-mF7Rcr3Dc2/view?usp=sharing

I launch the app around second 2 and it goes immediately to the splash screen, after which it goes right into the app.

Could you perhaps share a GitHub repo to an app that exhibits the behavior you are talking about?

Perhaps there is a difference between how I built it and you built it? The build I have is not a production build (which if anything should make any performance issue worse) and is side-loaded on the device from Xcode.

[tomavic]

Hi @kensodemann

Thanks for your comment and the video.

What I am talking about exactly happens in Android Devices (even the cheaper one which have android less than 4.2, which Ionic 3.x doesn't support and I have to use cross-walk to build the app).

What happens is a White screen lasts for 5 sec After splash and not before it.

There is nothing special about the apk itself. I run ionic cordova build android and installed the apk

Please checkout this video:
https://youtu.be/Pf__0R3NYxY

My android device is OPPO 5.1.1

[newuser44]

What setting do you have in your config.xml file for
<preference name="SplashScreenDelay" value="12000" />

when you do a build like you are doing its for dev, and so angular builts it with the JIT compiling (https://scotch.io/@kashyapmukkamala/jit-vs-aot-in-angular2-and-how-to-use-it)

The app is bigger and slower.
I don't know if you have it setup this way, in our app in the app.component.ts in an init section we have a platform.ready()

Once this fires it hides the splash screen. This would wait up to 12 seconds because that is the value in the config.xml I pasted above.

Recap. The app loads, the default wait time for the splash screen is 12 seconds, if the app takes longer then that you would just see a white screen.

[tomavic]

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.myapp" version="0.3.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>Lahloba</name>
    <description>Lahloba best food delivery app</description>
    <author email="info@app.com" href="http://www.app.com">TOoma | Designs</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <preference name="StatusBarBackgroundColor" value="#b53d00" />
    <preference name="ScrollEnabled" 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="true" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="1200" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="orientation" value="portrait" />
    <platform name="android">
        <preference name="loadUrlTimeoutValue" value="700000" />
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
        <splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
        <splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
        <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
        <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
        <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
    </platform>
    <plugin name="cordova-plugin-ionic-webview" spec="^1.1.16" />
    <plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
    <plugin name="cordova-plugin-geolocation" spec="^4.0.1">
        <variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
    </plugin>
    <plugin name="cordova.plugins.diagnostic" spec="^3.9.0" />
    <plugin name="ionic-plugin-keyboard" spec="^2.2.1" />
    <plugin name="cordova-plugin-googlemaps" spec="^2.2.2">
        <variable name="API_KEY_FOR_ANDROID" value="xxxxxxxxxxxxxx" />
        <variable name="PLAY_SERVICES_VERSION" value="11.8.+" />
    </plugin>
    <plugin name="cordova-plugin-statusbar" spec="^2.4.1" />
    <plugin name="cordova-plugin-facebook4" spec="^1.9.1">
        <variable name="APP_ID" value="xxxxxxxxxxxx" />
        <variable name="APP_NAME" value="myapp" />
    </plugin>
    <engine name="android" spec="6.3.0" />
</widget>

[tomavic]

@newuser44 please check the splash configurations, and let me know

[newuser44]

Up your SplashScreenDelay time and see what happens.
I would also do a build with --prod. You will have to change your environment.ts url to where you want it to point.

[tomavic]

@newuser44 I had increased splash screen delay time to be 6000, and the white screen is not visible anymore. 👍 💯
<preference name="SplashScreenDelay" value="6000" />

But the problem is -and that what I meant in first place- the device take too much time to be ready, and I hope Ionic team will take care of this in the next Major release to decrease that time

[newuser44]

This is part of Angular. It has two ways of compiling code, JIT or AOT, I think I posted a link to this above.

If you build your code with --prod, it switched over to AOT and the load time is WAY quicker. This is how your should build release anyways.

We went through the same thing. Our android app did not have a splash screen before, moved over to Ionic, started to see how long the Dev build was, ended up adding the splash screen. With the dev build it was close to 18 seconds to load, with the --prod build (AOT) its just under 4 seconds.

[tomavic]

Thanks for that.

It would be nice if this point added into documentations, explaining how to build for release and why🥇

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.