progress visible when browser's back button used

[slbug]

Steps to reproduce:

1. Click any link with enabled turbolinks. Progress will appear and dissapear when page content loaded
2. Press back button in browser and you will see progress bar with spinner forever.

[rstacruz]

Oh... clever. Let's see what we can do.

[rstacruz]

Okay, got it. This should be bullet proof now:

$(document).on('page:fetch', function() { NProgress.start(); })
$(document).on('page:change', function() { NProgress.done(); })
$(document).on('page:restore', function() { NProgress.remove(); })

And ensure that you're using Turbolinks 1.3.0+. I'm not sure when page:restore was added, but it was definitely not in older versions.

Here's the rationale:

• Use page:change instead of page:receive, contrary to Turbolinks documentation. The reason for this is that doing the page change will remove the progress bar (as part of Turbolinks's documentElement.replaceChild routine), and to counter this, we call NProgress.done() to re-render the markup and "resume" the progress bar where it stopped.
• Add a handler for page:restore so that when pressing the back button, any residual progress bar will be removed.

[vandamon]

Apparently this solution does not works for Wiselinks: https://github.com/igor-alexandrov/wiselinks.

[rstacruz]

If anyone has code on integrating NProgress with Wiselinks, please open a new issue. I'd happily add it to the documentation.

[dsandstrom]

Turbolinks recently added page:before-change [1], that gets fired when a link is clicked (fetch still works, just thought I would mention it).

[1] https://github.com/rails/turbolinks#events

[ctf0]

for the new v5 the method will be

$(document)
    .on('turbolinks:click', function() {
        NProgress.start();
    })
    .on('turbolinks:render', function() {
        NProgress.done(); // to work with the above method on first visit
        NProgress.remove(); // to work on back btn click, restore event
    });

[rstacruz]

Thanks! I've updated the turbolinks instructions.

https://github.com/rstacruz/nprogress/blob/master/Readme.md#turbolinks-version-5

[mrkongo]

Dear @ctf0, is this necessary? Without that code I can use very good nprogress. Why?

[ctf0]

@mrkongo u dont need to use the code if it serves no purpose to u, basicly its a solution for the main issue "having nprogress visible on going back"

[ctf0]

@rstacruz after more testing its recommended to use TL default progress instead of nprogress as its inaccurate , actually even TL progress is not perfect but the margin of false progress is smaller than nprogress.