Loading bar doesn't show if a new call starts before _completeAnimation is called

[mariocerrato]

What version of angular-loading-bar are you using? 0.9.0

What version of AngularJS are you using? 1.4.7

What browsers are affected? Tried with Chrome

Please describe the issue In the _complete method in cfpLoadingBar provider _completeAnimation is called only after 500 ms.

With AngularJS v.1.4.7 sometimes $animate.leave callback isn't called, so sometimes started flag remains to true; if it happens with a long call loading bar isn't showed and the user doesn't see it.

With AngularJS > v.1.4.9 the callback is fixed, but if a call starts before 500ms from another (if latencyThreshold isn't set > 500ms) loading bar won't show.

What did you expect to happen? Loading bar is showed always when a call starts after a complete is called.

What actually happened? Loading bar is showed only sometimes.

[akleiber]

I can confirm this with AngularJS 1.5.5. Sometimes the _completeAnimation callback is never run and started is never set to false.

I have not yet understood why this happens sometimes.

[faceleg]

I still can't replicate, if someone could provided an example in JSFiddle that'd get us closer to resolving this.

[h-adk]

https://plnkr.co/edit/evPU9JOUJDUGqJEj5sDQ?p=preview

@faceleg Please check the console log. Its fairly easy to understand the bug from the code itself.

I am using the 'started' and 'completed' events to show/hide my loading icon. I am getting the 'started' event only for the first batch.

Like @akleiber mentioned, 'started' is always true when the second batch starts before 500ms because the 'completeTimeout' is cancelled (which sets 'started' to false). So 'started' event is never broadcasted.

(Note: the in-built loader is working though)

[Shmow]

Can confirm I also ran into this problem.

Started event is not always broadcasted. Data is fetched without problem and complete event is broadcasted normally. Seems to occur randomly (hitting the same button multiple times produces different results).

Angular version: 1.4.1 Browser: Chrome

[galhardi]

I create a flag in complete method

if (reqsCompleted >= reqsTotal) {
   isProcessingComplete = true;
   setComplete();
}

And when start is called, I test the flag, if is true then the response is startTimeout with 700 delay.

if(isProcessingComplete){
  reqsTotal++;
  startTimeout = $timeout(function() {
    cfpLoadingBar.start();
    isProcessingComplete = false;
    return config;
  }, 700);
 return startTimeout;
}

With this the request and return are "synchronized". Do you see any problems?