Turbo Router - Pausing Rendering

Questions
#1

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?

#2

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.

#3

Hey @daft,

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.

#4

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

1 Like
#5

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

#6

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
#7

@daft Thank you!!

#8

Hey @daft, has this been integrated in the meantime? I can’t find anything about it in the documentation yet either.

#9

Hello again

I confirm this feature has been included in the latest v3 build of October CMS. The documentation has not been updated yet, though. If you try the example given here, it should work.

#10

sorry for bothering you :roll_eyes:
I tried it with the given example…Unfortunately it does not work for me. Version 3.0.67

event.preventDefault does nothing and I get the error: Uncaught TypeError: event.detail.resume is not a function

#11

Yes, you’re right. It hasn’t been included for some reason. We will make sure it is included in 3.0.68

#12

Ok, 68 was published today. Please try again

#13

Hey @daft,
it works so far. However, the page:render-before event is fired twice on previously visited pages which leads to other problems. Can this be fixed?

#14

Hi @Amin

This is normal for the “render” events to fire twice: once for the cached preview and once for the server update. Some options are:

  • make the function idempotent (can be called multiple times safely); or
  • disable the cache with this meta tag: <meta name="turbo-cache-control" content="no-cache">
#15

now it works. thanks for your help!

1 Like