Turbo Router - Pausing Rendering

Hi, I have a question related to the turbo-router.
is there a way to pause the loading like this:

document.addEventListener('page:before-render', async (event) => {
  event.preventDefault()

  await animateOut()

  event.detail.resume()
})

i would like to close some elements like dropdowns and offcanvas-menus before loading the new page.

Does anyone have an idea how to achieve this?

Hey @Amin,

This is a common problem since the turbo router caches a snapshot of the page with all its “drawers” open. In the backend, it is solved by detecting the cached preview and closing the drawers with CSS. Here you can see we hide the dropdowns and their overlays when the cache is shown:

// PJAX support
html[data-turbo-preview] {
    ul.mainmenu-items.mainmenu-submenu-dropdown,
    div.mainmenu-submenu-overlay {
        display: none !important;
    }
}

Regarding your exact requirement, the only events you can use preventDefault with are page:click and page:before-visit. The page:click event works best, so you would need to stop the process, animate everything out and then use oc.visit(...); to revisit the location afterwards.

Hey @daftspunky,

i still can’t get it to work.
when I use preventDefault on the page:click event the turbo is ignored and the page loads as usual.

Ah, yes, of course. This doesn’t work in practice. We can look at implementing a solution for this.

1 Like

that would be awesome. Thanks for your effort :heavy_heart_exclamation:

Ok, this has been added to the documentation and should be available in v3.0.67…

Pausing Rendering

If you would like to close some elements like dropdowns or off-canvas menus before loading a new page, you can pause the page:before-render event by preventing the default behavior and resuming it with the resume() function in the event detail.

addEventListener('page:before-render', async (event) => {
    event.preventDefault();

    await animateOut();

    event.detail.resume();
});
1 Like

@daftspunky Thank you!!