Advice: rotating a hero image

1

Good morning - looking for some advice on rotating a hero image. At the top of my site, I have a hero image with Prev/Next links. Imagine that it’s something like this:

<header>
	<figure>
		<img src="image-y.png" />
		<figcaption>
			Image Y is great!
		</figcaption>
	</figure>
	<a href="{ base-url }?image=X">
		Prev Image (X)
	</a>
	<a href="{ base-url }?image=Z">
		Next Image (Z)
	</a>
</header>

Before implementing Hotwire, I was doing this with custom JavaScript that would hit an API end-point (using fetch()) to get the Prev/Next image data and then progammatically construct all the HTML in JavaScript before swapping-out just portions of the UI. It would also pre-fetch the Prev/Next content / image src for each subsequent rendering so that the next Prev/Next interaction was instant.

Now that I’m migrating over to Hotwire, the Prev/Next links do a full-page fetch, and swap out all the content (obviously, that’s what full-page does). But, the UX of this is definitely missing some finesse when compared to the older, heavier-handed solution.

I’m currently using the Turbo.session to pre-cache the Next/Prev images (an undocumented feature, I think); but, the content and images can still flicker when the user navigates to the Next/Prev url (despite the fact that I am also pre-loading the images with new Image().src=???).

I suspect that my pendulum has swung too far back in the “vanilla HTML” direction. And, that I probably need some compromise solution, like still deferring all HTML rendering to the server but will using an API call to pre-cache / pre-load. And then maybe using my own innerHTML calls to swap out the UI.

I thought about trying to put the hero stuff in a <turbo-frame>; but, I still want to advance the URL (so that a refresh re-renders the currently-rendered hero). And, Turbo Frames won’t pull from the page cache, so my attempt to pre-cache the frame content doesn’t add value.

Sorry that there’s isn’t a well articulated question here - I guess I’m just looking for advice on how people may have implemented something like this in the past. Clearly, refreshing the page is the easiest approach. But, has the worst UX. Doing this all programmaticaly has the best UX; but, leaves much to be desired in the developer experience. I’m still trying to find my way in the Hotwire world, and I’m not quite sure where my compromise should fall.

2

Would it work to put data-turbo-action="advance" on the frame to get the url to update and then adding data-turbo-preload to the links?

1 Like