Use counter for ajax loader

Question

I was using a Boolean var for indication of loading so my code looked like this: (this example is in angularjs but i think it can be relevant for any ajax call handlers)

//HTML:
<div ng-show="$scope.isLoading">...LOADING...</div>

//JS:
//Init
$scope.isLoading = false;

//Executing http request:
$scope.isLoading = true;
mainService.post(alteredItems).then(function (response) {
init();
}).catch(function (err) {
  $scope.callBack(err);
}).finally(function () {
  $scope.isLoading = false;
});

function init() {
  $scope.isLoading = true; //another loading        
  mainService.get().then(function (response) {
  if (response) {

  }
  $scope.isLoading = false;
  });
}

The problem I had was that if 1 ajax method will complete before the other one so the "isLoading" will be false, and the loader will not be displayed although the request has not yet ended.

I converted the $scope.isLoading to int. So now code looks like this:

//Init
$scope.isLoading = 0;

//Start any ajax call
$scope.isLoading++;

//Finish
$scope.isLoading--;

Which works great, also no need to change the html because of the casting. I can't find a drawback in this approach and it seems better than the Boolean option.

What do you think?

Answer 1

1. You SHOULD consider migrating to Angular (aka Angular2, aka Angular5) from ANgularJS (version 1), as it's not developing and soon won't be supported anymore.
2. I guess nested promises would be much useful here (more details below).

Rewrite init() as follow

function init() {
  return mainService.get().then(function (response) {
    if (response) {

    }
    $scope.isLoading = false;
  });
}

And in main block instead of

mainService.post(alteredItems).then(function (response) {
  init();
})

Write:

mainService.post(alteredItems).then(function (response) {
  return init();
})

In this case your finally would be called AFTER bot async calls completed.

P.S. Consider using library cg-buisy https://github.com/cgross/angular-busy It automates displaying of loading indicator and accepts promises. Used it a lot in production.

Answer 2

IMHO you can go with angularjs http request interceptor where you can get hold of the each request and response pipeline and show or hide the loader accordingly.,

module.factory('timestampMarker', [function() {  
    var requestInterceptor = {
        request: function(config) {
            $("#loaderDiv").show();
            return config;
        },
        response: function(response) {
            $("#loaderDiv").hide();
            return response;
        }
    };
    return requestInterceptor;
}]);

module.config(['$httpProvider', function($httpProvider) {  
    $httpProvider.interceptors.push('requestInterceptor');
}]);

Answer 3

Store a couple : function name + boolean so you can even provide information on which request is actually processing on a multi request process.

The benefit of this will be to Identify which one of the request is upon a time slow or not returning result.

Ex:

{[ req1:0, req2:1 req3:1 ]}

You'll know that req1 hasn't returned any result yet. With that simple int counter you loose that information, and won't be able to debug easily.