NProgress.Queue slows progress

[tom-leys]

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.

[rstacruz]

Good point, I'd be happy to work this in.

[haydnhkim]

+1

too many NProgress.set() call and it was very sloooow. I think it must be fixed.

and my current fix:

NProgress.done = function(force) {
    if (!force && !NProgress.status) return this;

    $("#nprogress").clearQueue();
    $("#nprogress").stop();
    return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
  };

I think NProgress.done() must have clearQueue() and stop()