$ionicLoading, is there a way to cancel loading?


#1

Hello Guys.

Is it possible to cancel the loading spinner by the user when it is taking a long time, like a cancel button or just touching the screen?

Thank you.


Spinner without blocking UI
$ionicLoading but with some way to detect taps
#2

I don’t think so. Here is the key :

An overlay that can be used to indicate activity while blocking user interaction.

I personally kill the loading indicator after a pre-defined time. I’ve decided that on mobile, after 2.5 seconds to tell the user the request failed. However, as the loading indicator is blocking (z-index), the user can’t do anything on the screen.


#3

I solved this issue by creating a cancel button and using the $rootScope to handle it. This isn’t a good solution, but it works.

$rootScope.cancel = $ionicLoading.hide; //Or whatever action you want to preform

$ionicLoading.show({ template: '<button class="button button-clear" style="line-height: normal; min-height: 0; min-width: 0;" ng-click="$root.cancel()"><i class="ion-close-circled"></i></button> Loading...' });

#4

Thanks. I am not since which ionic version, but now you can put the cancel into the scope of the controller.

$scope.cancel = $ionicLoading.hide; //Or whatever action you want to preform

$ionicLoading.show({ template: '<button class="button button-clear" style="line-height: normal; min-height: 0; min-width: 0;" ng-click="$root.cancel()"><i class="ion-close-circled"></i></button> Loading...' ,  scope: $scope});