Delay client routing (until transition is complete)

[lutzissler]

First, thanks for building vite-plugin-ssr! It’s a relief not having to jump on that big Nuxt.js tanker for getting some SSR done.

I am building a Vue app/website and using clientRouting = true. My app is using page transitions which take a (small) while. Half of the transition/animation should happen on the old page, then the navigation should occur, and then the other half of the transition should happen on the new page. Hence what is needed is a way to delay the actual routing.

In vue-router, this can be done with a ‘global before guard’ (see https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards), which can be an async function or allows to return a Promise. If used that way, the navigation will only occur when the Promise resolves to true. In other words, I can simply do this:

router.beforeEach((to, from) => {
    return new Promise(resolve => {
      setTimeout(resolve, 150)
    })
})

…and the actual routing will be delayed by 150ms.

Is there any way to achieve this with client routing in vite-plugin-ssr?

[brillout]

You can't delay the rendering process start, but you can delay the actual Vue rendering (just sleep in your client-side render() hook).

If you can create a convincing UX story around it, I may consider a feature request.

[lutzissler]

Imagine a website which, when any link is clicked, shows an effect to hide the current page (like a theater curtain), then goes to the next page (behind that curtain), then pulls up the curtain again. We would need to delay the actual routing here (with a Promise) because we want to make sure that curtain is fully before navigating off the original page.

In other words, I don’t want to delay the rendering process start. I want to delay the routing start.

[brillout]

I see. So, yea, as proposed in my previous comment I think you can achieve what you want without delaying routing start, but instead by delaying the Vue rendering in render().

[lutzissler]

Thanks again for your response. Is that true? I think I will have to ‘drop the curtain’ before the routing starts because otherwise the old page will be gone before the curtain has dropped. Or am I missing something?

[brillout]

You can achieve that.

[lutzissler]

Ok, I suppose you mean by delaying the changePage() call in render(), like so:

setTimeout(() => {
    app.changePage(pageContext)
}, 150)

Thanks.