ionicLoading Bug

1

Hi
sometimes (when you switch states really fast) , the ionic loading.hide is not removing the
"loader-active" class from body element which makes modals buttons not useable
took me a long time to figure it out , this is my code

 $ionicLoading.show();
        DataFactory.sales.add(SaleFactory.toJson()).then(function(){

             $ionicLoading.hide();
            $state.go('receipt');
        });

so the loading is gone also the backdrop but the body keeps the class 'loader-active’
its not happen everytime , but if you walk through the application its happen once in a while
( i think the state.go just break the hide at the middle , if i pause the execution with the debugger then the problem not happening - i guess it had enough time to finish the removal of class)

if any1 have a problem with modal not being clickable check if you have the loader-active class on body tag

until the ionic team will fix it here is a quick fix :

$rootScope.$on('$stateChangeStart',
        function(event, toState, toParams, fromState, fromParams){


            $ionicLoading.hide();
            $document[0].body.classList.remove('loading-active');

P.S
$ionicLoading.hide(); not working because his internal flag (isShown) marked as false.

tested on beta.11
thanks.

4 Likes
3

I have exactly the same problem using the $ionicLoading for indicating request activity inside an interceptor.

At first sight it was random, but inspecting the DOM inside the debugger showed that <body class="loading-active"… was always present. Using buttons and navigating is still working, but as soon as you call $ionicModal the modal is not usable any more and there is no way to escape.

using also beta.11, but problem exists also in beta.10

hopefully this will be fixed soon,
@rs324 thank you for the workaround

4

Confirmed here as well. This is critical, any feedback from the ionic team please?

5

Ok actually I think the bug I have is different:

If I use $ionicLoading it adds div class “loading-container” to the DOM which contains div class loading. This is not removed from the DOM upon hide and will sit there throughout the lifetime of the app - I’m assuming this is a bug and not expected behavior…

6

Same issue on beta.11. Quick fix from @rs324 is works, but I need add some timeout on different device. It’s not a safe solution beacuse I dont know users device performance. Hopefully it will be fixed soon.

@rs324 thanks a lot, you save my days.

7

I have a similar bug in beta 11… for some reason the loading-container is never inserted into the DOM.

8

I believe this is fixed now, are you seeing this in the nightly builds?

9

I solved this problem removing the class ‘loading-active’ from the body:

$ionicLoading.hide();
angular.element(document.querySelector('body')).removeClass('loading-active');
1 Like
10

I can confirm this bug is present in release: v1.0.0-rc.2 :confused:

11

I still experience this with ionic v1.0.0 final, with loadingOptions.delay set to 100ms.
If I don’t set a delay, this doesn’t seem to occur any more, so I tend to think this might be a race condition, e.g. calling $ionicLoading.hide() shortly before the delay expires.
This is a wild guess, anyway, since this issue seems to occur randomly, and is hard to reproduce.

12

I also noted that the workarounds given here do not work in my case, using ionic v1.0.0.
It seems that after calling $ionicLoading.hide(), the ‘loading-active’ actually is removed from body.
However, some time (couple of milliseconds, apparently) later, the class is added to the body element again, without any application code executing inbetween (at least to my knowledge and debug abilities).

13

FYI: My current workaround looks somewhat like

$ionicLoading.hide();
$timeout(function() {
  if (angular.element(document.body).hasClass('loading-active')) {
    $log.warn('Loading still active!');
    $ionicLoading.hide();
  }
}, loadingOptions.delay);

and seems to work rather well. As expected, I get “Loading still active” warnings once in a while, where there shouldn’t be any.