Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

progress visible when browser's back button used #8

Closed
slbug opened this issue Aug 21, 2013 · 11 comments
Closed

progress visible when browser's back button used #8

slbug opened this issue Aug 21, 2013 · 11 comments

Comments

@slbug
Copy link

slbug commented Aug 21, 2013

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
Copy link
Owner

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

@rstacruz
Copy link
Owner

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
Copy link

vandamon commented Nov 2, 2013

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

@rstacruz
Copy link
Owner

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

@dsandstrom
Copy link

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
Copy link

ctf0 commented Aug 11, 2016

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
Copy link
Owner

Thanks! I've updated the turbolinks instructions.

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

@mrkongo
Copy link

mrkongo commented Aug 13, 2016

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

@ctf0
Copy link

ctf0 commented Aug 14, 2016

@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
Copy link

ctf0 commented Aug 30, 2016

@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.

wnm pushed a commit to wnm/nprogress-rails that referenced this issue Oct 20, 2017
Update turblinks v5 events, as recommended by nprogress (rstacruz/nprogress#8 (comment))
I've tested both versions. This gives better UX, imo. There is no delay between clicking a link, and the loading bar appearing, even on really slow connections.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants
@rstacruz @slbug @dsandstrom @vandamon @ctf0 @mrkongo and others