I'm trying to create a wrapper over useNavigate which can help me have a page transition, but because of the async DOM update it is breaking

[jerrymedias]

To solve it I've kind of waited for a promise to get resolved within a setTimeout with a delay of 50ms. I know that navigate internally uses startTransition by default and we can pass unstable_flushSync as true in the options to have sync rendering instead of a concurrent rendering but that is not enabled of navigate(-1) or whenever delta is passed to it. Is this a correct solution or should I do something else. I also tried mutationObserver to observe the change in DOM and resolve the promise but that didn't work.

Also I need an answer that why only 50ms is working anything less than this is breaking the transition for a low end device

document.startViewTransition(async function updateDOMCallback() { delete options.skipTransition navigate(route, options) await new Promise((resolve) => { setTimeout(resolve, delay) }) })

@brophdawg11

[brophdawg11]

Can you provide a minimal code sandbox of what you're trying to achieve?

[jerrymedias]

Hye @brophdawg11 thanks for the quick reply, please find the link to the CodeSandbox. useNavigateWithTransition.js file is the wrapper over useNavigate with transition using viewTransition.

https://codesandbox.io/p/sandbox/sharp-architecture-t4w6k7

[jerrymedias]

@brophdawg11 Did you get a chance to have a look at the sandbox
please find the link to the CodeSandbox. useNavigateWithTransition.js file is the wrapper over useNavigate with transition using viewTransition.

https://codesandbox.io/p/sandbox/sharp-architecture-t4w6k7

[brophdawg11]

view transitions and flushSync are only available when using a Data Router (via RouterProvider). They are not be available in a BrowserRouter app like the sandbox you've provided.

I would look into <Link unstable_viewTransition> to incorporate page transitions into your app. Here's an example usage of them: https://github.com/remix-run/react-router/tree/main/examples/view-transitions

[jerrymedias]

@brophdawg11 well in the real application I’ve used data router only, I just want you to have a look at the useNavigateWithTransition.js file which has a wrapper over useNavigate to have a forward and backward transition. Please review the wrapper function and also let me know why wait(50) works anything less than that didn’t work. I didn’t use unstable_sync as it can change with any minor update also in case of delta we cannot pass options. So that’s why I came up with async dom update method & waiting for 50ms and then the callback to get executed. My question is my implementation correct and why only 50ms works?

[jerrymedias]

This is working as expected and I’ve wrote this for one of the prod app just wanted you to review that useNavigateWithTransition function and also let me know why the delay of 50ms only works. Also my prod app don’t have child routing for now.

[brophdawg11]

I can't provide any insights into the delay when the reproduction is using it with an unsupported BrowserRouter. If you want to provide a minimal reproduction of the issue in a proper RouterProvider setup I can try to take a look.