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