Animate page load with data-turbo-action="replace"?

[ibrahima]

Hi! I'm wondering if there's a way to add some kind of transition when clicking on a link with data-turbo-action="replace"? It seems to just replace the screen with a flash of a blank screen in between which feels slightly jarring. For regular navigations we do have the animation of the new page sliding in so I'm wondering if there's a way to enable that or something else. (I'd probably want a different animation because it's intentionally not pushing a new page onto the stack - in my case, a slide up or down might be better.)

Thanks!

Edit: I found these similar issues about flashing, although in my case the URLs are completely different. I just want some kind of animation to mask the flashing, I can accept that it does need to render a full new page because these are separate pages.

hotwired/turbo-ios#136
#53

[joemasilotti]

I think you're on to something here! The replace transition is quite jarring.

RocketSim_Recording_iPhone_16_Pro_6.3_2025-08-21_20.58.31.mp4

I think a fade animation could work quite well. What do you think?

RocketSim_Recording_iPhone_16_Pro_6.3_2025-08-21_20.58.46.mp4

[joemasilotti]

WIP PR #166.

[ibrahima]

Looks great to me! Thanks!

[joemasilotti]

Excellent, I cleaned up and marked the PR as ready for review!

[ibrahima]

Cool to see this merged! I just tried out the beta version and I'm seeing some wonkiness on the navbar on iOS 26 with Liquid Glass when there are navbar button items. I don't see the same issue on the demo app's replace action but there are no right bar button items on that page. Also, if it matters, my nav bar button items are appended to the list rather than setting the rightBarButtonItem because I use multiple on some pages.

Simulator.Screen.Recording.-.iPhone.17.Pro.Max.-.2025-09-30.at.12.00.18.mov

In any case, thanks for building this, really cool to see it in practice!

[joemasilotti]

Can you provide a diff or repo that reproduces the issue?

[ibrahima]

Hm, I'm not seeing it in the demo app when I use data-turbo-action="replace" with a bridge overflow menu... so nothing to report yet :(

Simulator.Screen.Recording.-.iPhone.17.Pro.Max.-.2025-09-30.at.17.18.47.mov

I will say that for my RightBarButtonComponent, I am appending to the navbar and I remove them on disconnect, so I wonder if appending and removing them is what causes the issue.

[joemasilotti]

Can you try adjusting your code so it uses set instead of append?

[pardeyke]

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2025-12-09.at.21.24.35.mov

I have just updated to 1.3.0-beta to test the new feature. In this configuration, it is kind of falling apart, but I believe that's because my navigator and HTML do have different background colors.

I am wondering if it's possible to reassemble the same functionality as in the web, where Turbo loads the page in the background and replaces it after it’s finished loading. So we would not even need to fade...

[joemasilotti]

What if you set the background color in Swift to match the HTML one?