How can I tell if transition cache is working?

[gregblass]

I can't seem to tell if the transition cache is working. First of all, should

 Turbolinks.enableTransitionCache(); 

be run once, or should I be running it on every page? (it doesn't seem to make a difference for me either way).

And second, it just doesn't seem to be working for me, but I'm not sure if I'm expecting the right result - and I'm not sure how to tell for sure. I have a show action with a ton of data being loaded from the database (this is my main concern as far as pages to cached). If I navigate back to my index page, and back to that page, it doesn't really seem to be loading instantly.

Should my console show all those database calls again? Isn't is supposed to be instant? If it is, I'm definitely doing it wrong.

How would I go about looking at the transition cache from within the browser to see if it is indeed working? Or debugging it in some way? Like "Transition cache hit, page loaded from cache" debugger statements, etc?

Or am I just not understanding the purpose of this or missing the big picture? Is it only supposed to work with the back and previous buttons or something?

Thanks in advance!

[gregblass]

OK, I solved my issue, more or less. I was using a custom loader image. I basically had a div covering everything that was the same color as the background with a loader image that I would hide and show:

 $(document).on('page:fetch', function() {
   $("#turbolinks-loader").show();
 });
 $(document).on('page:change', function() {
   $("#turbolinks-loader").hide();
 });

Removing that allows me to see that the cache is working...but its weird, for my long pages, the top will display right away, but something else is taking a long time for the page to load all the way. I'll investigate this personally since its probably something going on within my app (unless anyone has any insight here).

But, any advice on how to only get this to happen when its fetching NOT from the cache? In other words, don't run that code at all if its displaying a cached page (because its instant and not needed)?

[gregblass]

Oh I think I get it now...the page is displayed instantly, then any differences are updated? Yeah, that must be it...

I just went back to the stock top bar loader for now. But if there is a way to do something like:

 $(document).on('page:fetch-not-from-cache', function() { });

Let me know!

[gregblass]

I'm thinking its gonna be:

page:load [newBody] A new body element has been loaded into the DOM. Does not fire on partial replacement or when a page is restored from cache, so as not to fire twice on the same body.

I could use this instead and keep my custom loader...and it won't show up if its pulling from the cache. Will confirm.

[gregblass]

This interaction brought to you by rubber duck debugging, LLC.