Any way to set InstantClick off by default, but enable for selected links?

1

TL;DR

Turbo Handbook describes how the feature could be disabled for segments via <div data-turbo-prefetch="false">...</div>. Is there any way to disable it by default, and enable only for some segments? <div data-turbo-prefetch="true">...</div> seems to do nothing.

I absolutely love the improvement in UX InstantClick brings, thank you, everyone that made it possible.

Dropping the feature to our SaaS app is impossible, though, because there is a wide variety of links that should not be clicked twice - things that contain CSRF tokens and lead to some write actions etc.

Long story short, we had to disable the feature completely through the meta tag until we find time to properly assess what needs to be done.

It might be a while before that happens, so I was looking for a way to disable the feature for links that are know to work fine - things in navigation menu, paging of datagrids etc., easily 80% of navigation that actually matters when it comes to speed.

2

turbo data attributes are generally inherited. So I would guess that you could set data-turbo-prefetch="false" on a parent element and then enable it selectively on child elements. Though I don’t know for sure that it works that way.

3

That’s my point - I don’t think the prefetch can be enabled once disabled. With that said, maybe it can be enabled if I don’t use the meta tag, and disable it through data-turbo-prefetch="false" on the body element. I’ll give it a try.

4

Winning, it worked.

If you disable the feature through the meta tag, it can’t be selectively enabled, but if you disable it via <body data-turbo-prefetch="false">, then you can re-enable it later on child nodes.

Thanks @OutlawAndy for pointing me the right way.

3 Likes