I'm trying to show or hide a loading indicator on a button when a request is busy. I do that with angular by changing the $scope.loading variable when a request is loading or when it's done loading.
$scope.login = function(){
$scope.loading = true;
apiFactory.getToken()
.success(function(data){
})
.error(function(error){
})
.finally(function(){
$timeout(function() {
$scope.loading = false;
}, 0);
});
};
In the frontend:
<button ng-disabled="loading" class="button button-outline button-positive" type="submit">
Log in
<span ng-if="loading" class="ion-refreshing"></span>
</button>
This works fine, but the loading icon (ion-refreshing) is shown for about 2 seconds, while the $scope variable is updated immediately. I tried $scope.$apply but that doesn't seem to be what's wrong here, the scope is updated just fine and immediately after the request. It's just the icon that isn't responding quickly enough.
Thanks for helping me understand this!
I had the same issue, and worked-around it by using ng-class with the 'hidden' class name to hide the element instead of using ng-if or ng-show/ng-hide.
Try removing ngAnimate if you're not using it from your app config and index.html page:
angular.module('myApp', [...'ngAnimate',...])