I'm building a Rails 4 app and using Turbolinks Classic (haven't upgraded to Turbolinks 5 yet).
I wanted to add a spinner animation to my page when loading a new page, so in my JS file I added:
$(document).on "page:fetch", ->
$("#main").html("<div class='page-loader-container'><div class='spinner spinner-primary'></div></div>")
Where #main is a container for the core of my app.
This works great when going from link to link; Turbolinks fires, the spinner replaces the content, when Turbolinks gets the new content it replaces everything just fine.
However, when I use the browser back button, the spinner is displayed but the cached HTML never replaces the page.
I've looked at the Turbolinks docs as well as the jQuery plugin docs and can't figure this out.
What I'm trying to do is only execute my spinner code when Turbolinks is actually getting a new page; when loading a page from cache, I shouldn't need a spinner because it should happen so fast users don't need to be notified.
Update 2016-12-14 13:40
When I use Turbolinks.enableProgressBar(); the progress bar works as I would expect: it loads when selecting new pages but it doesn't show at all when loading cached pages. I'm using that for now and it "works".
I would like to dig into the source code, however, and find out how they're handling the events for the progress bar, because I think those are the same events I'd like to use for my spinner.
This github page has some good detail in his README file. I wonder if this would help especially where the Page Cache section is:
https://github.com/turbolinks/turbolinks-classic#page-cache
I also thought the Events table was pretty neat. (a few sections above page cache)