Strange flashing with $ionicLoading

1

I’m on the nightly build. My goal is to show the loading overlay for a couple seconds while content loads. I wanted to use setTimeout() to delay hiding the overlay, like so:

// Show the loader (call a function like the one here: http://ionicframework.com/docs/angularjs/views/loading/
$scope.show();
 
// Tell the app to do stuff
 
// Delay hiding for 1500 ms	
setTimeout(function() {
		$scope.hide();
	}, 1500);

Unfortunately this caused strange “flashing” of the loading indicator. It would show the overlay for a split second, then go away, then after the 1500 ms timeout, would flash momentarily once more. I dug through the nightly-ionic.js and found this.

// Wait 'showDelay' ms before showing the loading screen
    this._showDelayTimeout = window.setTimeout(function() {
      _this.el.classList.add('active');
    }, _this.showDelay);

When I commented out the showDelay to just add the “active” class immediately when the method is evoked, everything worked fine. Just thought I’d point this out to the Ionic team. It seems strange to even have a showDelay for the loading indicator. Given that it causes these problems, it might be worth getting rid of it,

2

I’ve got 2 samples here that aren’t displaying the problem.

Can you fork one and modify it the way you have config’ed so we can see what’s happening?

0.9.27 : http://codepen.io/calendee/pen/hEGIb/

Nightly : http://codepen.io/calendee/pen/vmqrH/

3

@Calendee, thanks for the reply. Sorry I didn’t get back to you. I’ve checked into this a bit more. Here is what Ive found. If showDelay is set short enough (10 ms does it) and you also change states while the loader is showing, it flashes a lot of the time. I forked the “App Intro Walkthrough 1.0.0 beta” CodePen and it set it up to show the flashing behavior when you finish the walkthrough (just click “skip intro” in top left of app)

http://codepen.io/cnanders/pen/rKuxy

If you increase the showDelay property to > 100 ms, the flashing is mitigated. Don’t know if that helps you solve the problem, but at least I found a way to make it reproducible.

4

Are you on a device or desktop browser when seeing this issue? I’m running it in Chrome & Canary and not seeing the problem.

5

@Calandee, I’m seeing it on desktop Safari 7.0.3. I just checked with Chrome 34.0 and it was not reproducible.

6

Great. Ionic’s not really a desktop tool, but it is nice when it works there. I’d really like to know if you have this problem on device when wrapped in PhoneGap. Keep us posted.

7

I’ve also just started having issues with this. I have experienced this issue in both Safari and (more importantly) on iOS (7.1). Chrome is working fine as expected.

8

Okay, I’ve reproduced the bug.

If showDelay is less than about 200ms, you get the stutter flash. If showDelay is > 200 ms, the stutter flash goes away. If showDelay is removed completely, the stutter flash comes back.

I’ve opened Issue # 1132 for this:

9

FYI : This is fixed in the nightly if you use the NEW API.

$ionicLoading.show({ 
	template : '<i class="icon ion-loading-d"></i>',
	delay : 5
});
10

Is this issue fixed in (v1.0.0-beta.4 ‘antimony-antelope’) ?, If not is there any plan to fix this in the latest releases except nightly version.

11

See the issue that was linked above:

Andy,

I apologize. I should have tested that first thing.

In the nightly with the OLD API, it still fails. In the nightly with the new API it does not fail.

Justin