NProgress.Queue slows progress #15
Description
Wonderful progress bar. I'm integrating it into our dashboard at the moment. Our site is here see for instance this dashboard
We load about 20-30 data files in the background, sometimes. The number depends on the user navigation. I track the number of files and invoke NProgress like so:
if @req_ctr == 0
NProgress.start() # <---------------- Invoke here
@loading true
@req_ctr += 1
---- And in Ajax callback
@req_done += 1
NProgress.set(@req_done / @req_ctr) # <--------------- Invoke here
if @req_done == @req_ctr
@req_ctr = @req_done = 0 # All outstanding requests done.
@loading false
-- I found that it could take seconds after all the loads were finished until the animation completed. It was because you are queuing animations, and I am putting up to 30 little animations into the queue.
My config is like this
NProgress.configure({ ease: 'ease', speed: 200 , trickle:true});
For now my solution is to limit the number of animations in the queue, but my preference is to just clear the queue and patch the correct animation every time if that is possible. Here is my current fix:
NProgress.set = function(n) {
---
$progress[0].offsetWidth; /* Repaint */
if ($progress.queue().length >= 3 && n !== 1){
// Too many animations already in queue, don't bother.
return;
}
I also decreased the wait between one intermediate animation and the next to avoid the last moments of the ease
} else {
setTimeout(next, speed * 0.9);
}
Thanks again for the great project.