bug: bug: $ionicLoading Not Being Removed

[saniyusuf]

Type: bug

Platform: android 4.4 webview

Type: bug

Platform: android 4.4 webview

Hi,
I have a case where in my Resolve for a route, I get some data from the local DB.

resolve: {
    CategoriesList: ['Category', '$ionicLoading', function(Category, $ionicLoading) {
        $ionicLoading.show({
            template: 'Loading Categories',
            noBackdrop: true
        });

        return Category.getAllLocalCategories()
            .then(function(allLocalCategoriesSuccessData) {
                $ionicLoading.hide();
                return {
                    categories: allLocalCategoriesSuccessData,
                    success: true
                };

            }, function() {
                $ionicLoading.hide();
                return {
                    success: false
                };

            });
    }]
}

The code above shows how I handle my flow by showing the $ionicLoading and then hiding it asap I get something. This code has always worked since up until RC3. Updating to RC4 RC5 including Stable 1.0.0 seems to make sure that the $ionicLoading stays open. The funny part is it happens only on Android. On IOS the code works as normal but on Android (Both IONIC Serve & Ionic Device), It breaks. I have a video showing proof.

[mhartington]

Could you provide a codepen demo? Faking the DB call of course

[saniyusuf]

Hi @mhartington I wont be sure if a codepen will be of help here as there is soo much going on. But I can tell you that in the bare bones its the fact that post RC3 based on the code above the $ionicLoading refuses to hide on android only. On IOS it works fine post RC3

[perrygovier]

Hey @saniyusuf, it's difficult to fix what we can't reproduce. Even using $timeout instead of ajax calls, could you give us some way to reproduce it that we can inspect and test against?

Btw, thanks for all you're doing in the UK. We'll be London for AngularConnect in Oct. Let me know if there's any meetups we should swing by.

[saniyusuf]

Hi @perrygovier I have created a code pen similar to my use case here http://codepen.io/saniyusuf/pen/OVboOz . This problem is a very bizarre one on IOS both Chrome, emulator and device no problem but on Android both Chrome And Device, the loading does not go away and worst part is there is no error in console.

And yes I should be in London, i was disappointed you did not come to Amsterdam with the lads it was great meeting you guys.

[ffabreti]

I've had similar problem ( $ionicLoading.hide() not working ) when I implemented localStorage cache in my App. I have debugged with lots of console.logs everywhere because I had not a single error on the console. I came the the conclusion that retrieving cached data was so quick that $ionicLoading.hide() finishes execution before $ionicLoading.show().
What solved for me was: $timeout( function(){ $ionicLoading.hide()},100);
I have seen this hack before on Titanium with Android, so I guess it has something to do with the way Android code is processed...

EDIT
If you do $ionicLoading.show({delay:100}) and then $ionicLoading.hide() it works, I mean, if the two calls are done very fast ( less then 100ms ) loading is never show, what is supposed to be expected.
I think that the show call is registered and the hide call cancels it. Obviously! But when you do not use the delay option, the show call spends some time executing itself (async, my guess) while the hide call gets executed (and hides nothing) resulting loading to stay opened forever.

[saniyusuf]

Ahh finally someone with my problem and I thought I was going crazy. @ffabreti For me it works well on IOS but once you switch to Android the problem persists.

[TeChn4K]

Same problem ! Explanations proposed by @ffabreti seem consistent.

$ionicLoading.show({delay:100}) made my day, thank !

[saniyusuf]

@mhartington @perrygovier any update on this little bug. For me it is android specific. The little hack seems to work

[mhartington]

Hmm, is that codepen from earlier still a good base to work from @saniyusuf ?

[saniyusuf]

Yup @mhartington I think whats happening is the action being returned as a promise is happening way too fast for the $ionicLoading. Because asap I use a normal promise via a real http request which takes time it works cleanly.

[cesar-oyarzun-m]

Hi I have the same problem using cordova calls, if the call fails the $ionicLoading stay opens forever here is my code

$ionicLoading.show({
        templateUrl: 'progress-connecting.html',
        clickOutsideToClose: false,
        delay:100
  });
var promise = beaconService.readBeacon();
promise.then(function (beaconRead){
  $scope.beacon = beaconRead;
  $log.debug('BeaconCtr - got beacon details ' + JSON.stringify(beaconRead));
  $ionicLoading.hide();
}, function(err){
  $log.debug('BeaconCtrl - beacon read failed ' + err);
  $ionicLoading.hide();
  $scope.showAlert('Could not connect to this beacon!');
});

Only when the call fails and go to error the dialog doesn't close otherwise it get close

[lucasmendonca]

Same problem !
$ionicLoading.show({delay:100}) resolve my problem. Thanks @ffabreti.

[aneeshatgit]

{delay: 100} indeed solved my problem too. Thanks.

[danbucholtz]

All,

This issue should be fixed in the commit above. That commit will be merged into the nightly in the next day or so. Please re-open if the issue remains.

Thanks,
Dan

[pawan-mittal]

@ffabreti Thanks a lot. I was really struggling with this issue, but your solution saved my day.

[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.