Pausable rendering

[domchristie]

Just like turbo:before-visit, this pull request makes the turbo:before-render event cancellable with preventDefault. Additionally it adds a render method to the event to let the render process resolve (using Promises). This effectively makes rendering pausable; useful for waiting for exit animations, and could open the door to custom renderers e.g. DOM diffing. A basic example might look like:

addEventListener('turbo:before-render', async function (event) {
  event.preventDefault()
  await animateOut()
  event.detail.render()
})

Here's a demo of some basic animation possibilities: https://laser-crawling-chanter.glitch.me/ (View source)

This pull request also adds the Visit's action to the event detail, making it possible to change the behaviour depending on whether it's an advance or restore.

If there's interest, I could do similar features for streams/frames + add documentation.

There are a few old Turbolinks issues that make reference to something like this:

• is it possible to pause render before everything is loaded? turbolinks/turbolinks#68
• Transition page, tinming for transition out. turbolinks/turbolinks#70
• Slideup new page over existing one turbolinks/turbolinks#153
• Have you thought about using virtual DOM diffing? turbolinks/turbolinks#184
• Animating Transitions turbolinks/turbolinks#293
• Force Turbolinks to wait before append new page turbolinks/turbolinks#408

[rainerborene]

This is the only thing stopping me from using turbo at my company. Just waiting for @sstephenson bless on this PR 😅

[daviddeutsch]

Apologies for the additional bump, but this has been in waiting since January and would be an amazing addition.

[weaverryan]

@domchristie i don’t know the status of who would merge things at the moment, but, to help, perhaps you could resolve the conflicts?

And, while we’re waiting, is there any decent workaround?

Thanks!

[daviddeutsch]

Seems like this is orphaned after the recent changes at basecamp.

Pinging @dhh !

[dhh]

Happy to see this carried forward, if someone else wants to pickup the PR.

[kirillplatonov]

@dhh The feature looks great. I will prepare an updated PR for it.