White screen appears for a split second after splash screen

Asked 5/1, 2017 at 14:13 Answered 6/1, 2017 at 15:27

I have made an app with IBM mobileFirst 7.0 (I also use Ionic) and I notice that right after the splash screen and for half a second or so, a white screen appears. I searched the web and some people said that uncommenting

autoHideSplash: false,

in wlInitOptions and adding this code:

var app = angular.module('app.controllers', []);

//manually hide splash screen
app.run(function($ionicPlatform) {
      $ionicPlatform.ready(function() {
            setTimeout(function() {
                WL.App.hideSplashScreen();
            }, 100);
         });
        })

in my controller (I only have 1) would solve the issue. Yet nothing happens. (I also changed the timeout but nothing seems to change)

I want to seee my app right after the splash screen dissappears without the white screen. How can I do that?

UPDATE & SOLUTION:

After reading Idan's answer, I made a few changes that fixed the problem. First of all in my index.html, I was loading MobileFirst at the end of my <head>, after Ionic and all controllers had loaded. I changed that and now in the <head> tag I firstly load:

<!-- mobileFirst initialization -->
           <script src="js/wlInit.js"></script>
           <script src="js/messages.js"></script>

and then I load Ionic and the controllers.

I also changed the timeout of WL.App.hideSplashScreen() in my controller from 100 to 1500.

No white screen appears any longer :D

Tarriance answered 5/1, 2017 at 14:13 Comment(4)

Please look here stackoverflow.com/… – Mccool 5/1, 2017 at 14:41

forum.ionicframework.com/t/… – Mccool 5/1, 2017 at 14:42

i think first you need to clean the project – Mccool 5/1, 2017 at 14:42

@SantoshShinde I've already read your second link ( I describe the steps I made in my question). I don't think I can install cordova splashscreen in my Worklight project. – Tarriance 5/1, 2017 at 19:7

I see you're using the WL.App API, but are you sure you're using it in the right place? This API can be called only after function wlCommonInit was called.

So I think you're on the right path. It sounds like you should indeed try to extend the duration of the splash screen as something in your app is taking a while to load (hence the white flashing), so by extending the splash screen a little while longer, letting whatever it is to load, and then removing the splash screen could be a possible workaround.

Make sure this API is called only after wlCommonInit was called
Increase the duration some more.

Seventeen answered 6/1, 2017 at 12:32 Comment(2)

I think I am using the Wl.App API after wlcommonInit was called. I will experiment a little bit more to be sure. – Tarriance 6/1, 2017 at 14:50

You were right! I made some changes and it is fixed now. Editing my questions to include what I did. Thank you very much for your answer! – Tarriance 6/1, 2017 at 15:2

You can also use ng-cloak to hide any white flashes that angular causes.

Leoraleos answered 6/1, 2017 at 15:27 Comment(5)

Can you please explain this a bit more? – Tarriance 6/1, 2017 at 15:33

Here is the link from Angular's Site docs.angularjs.org/api/ng/directive/ngCloak – Leoraleos 6/1, 2017 at 15:34

Yes, I know what ng-cloak does but how would it hide white flashes? Should I use it in on the body tag for example? – Tarriance 6/1, 2017 at 15:37

I've used it in the body tag where I had a dynamic list of items from a database. Every time I would add an Item it would cause a white flash due to post-back. To alleviate this I just put the ng-cloak in the body tag where my dynamic table was. – Leoraleos 6/1, 2017 at 15:39

Very interesting indeed! Thank you for your anwser! – Tarriance 6/1, 2017 at 15:40

Recommended topics

Hot tags