search

domchristie / turn

📖 Animate page transitions in Turbo Drive apps
https://domchristie.github.io/turn/
MIT License
167 stars 6 forks source link

[BUG] Transition hangs after 400~500 page visit #14

Open YummYume opened 1 year ago

YummYume commented 1 year ago

Hello! It's me again.

I updated to the latest version and really decided to try out the view transition API. It works very well and looks very smooth.

However, I encountered a weird behaviour. After visiting a 400~500 status code page (like a 404 page), future navigation will hang for a long time (a few seconds) during which I cannot do anything on the page. It's definitely not a speed problem, as the networks tab completes instantly. Removing Turn also gets rid of the problem. I created a new quick Symfony app and tried it without any other package and with default transitions, and the problem persists. I also tried to set Turn.config.experimental.viewTransitions = false; but it doesn't seem to do anything? It's still using the view transition API, I believe (dunno if this is intended).

Looking in the DevTools, it seems that the transition API tries to animate something? Because I can see the ::view-transition appear while it hangs. It's also worth noting that it does not happen when I visit the 404 page directly from my browser and then click on the homepage. It only happens when Turbo visits the 404 link.

If needed, I can create a quick repository to highlight what I did exactly and what the problem is (I only tested it in Symfony apps, but I doubt it's a problem with it, I just built the assets normally using Webpack).

YummYume commented 1 year ago

Here's a quick video I made to showcase the problem. You can see that right after I visit the 404 page, all visits hang for a few seconds.

https://github.com/domchristie/turn/assets/61044908/e332fca3-44a7-45e4-bb89-1afd7f9c0f42

domchristie commented 1 year ago

Thanks for this. I'll look into it.

domchristie commented 1 year ago

It looks like turbo:load is not fired when the response errors. I'll see if there's a workaround, but I've raised an issue here: https://github.com/hotwired/turbo/issues/958

YummYume commented 1 year ago

Thanks for such a quick response (and PR to fix the problem) ! In the meantime, is there any (even dirty) workaround to it? I was thinking about just disabling Turn during error pages, but I'm not too sure on what's the best way to do it.

domchristie commented 1 year ago

Unfortunately there currently isn't a workaround. You may wish to use Turn v2.1, as this does not have View Transitions enabled by default.

Aside: In my own 404 tests, I'm not seeing any hanging. However I have noticed that the turn-enter and turn-advance classes are not being removed, so there's definitely something wrong.

YummYume commented 1 year ago

Well, I ended up just deactivating drive navigation on those pages using the meta tag, causing a full page reload after navigating out. The only case where it will not work is when you hit the back button and Turbo performs a restoration. I suppose it could even be better to completely disable Turbo temporarily on those pages.

But I see that https://github.com/hotwired/turbo/pull/960 has been merged, so I'm hoping for a release sooner or later :slightly_smiling_face: