Wrap router actions in startTransition

[hugo-vrijswijk]

This wraps the router state actions in startTransition. This allows router updates to be non-blocking. React recommends all router updates to be wrapped in a transition.

I.e. if you click on 1 page, you can immediately navigate to another page without waiting for the first page to finish rendering.

I've wrapped 2 actions in startTransition, these made the most sense to me, but I'm not sure if both of them are necessary. The code is a bit complex 😅

[rpiaggio]

Thank you very much. It would be great to get this working.

I don't think the second action is necessary since it doesn't update (React) state, only the url. Things should work fine with just the first action, the one wrapping $.setState.

Also, I'm a bit worried about the F.transSync. In theory, it could introduce an async boundary, and React won't mark state updates as transitions in async code. It makes it explicit that the wrapped function must be synchronous. But I think this can be solved by turning things around and using F.transSync(startTranstition($.setState(...))).

Finally, I'm not sure startTransition works with class compnents' setState, at least I can find no evidence of it. It seems to require a setState from a useState hook. Could you confirm if this actually works? Maybe you have already tested it or can test it on an example with the same functionality as https://react.dev/reference/react/useTransition#examples ?

[hugo-vrijswijk]

I've tried it out, making something similar to the examples. It works as expected with only the first startTransition around the setState, so I've removed the second one now

[rpiaggio]

Awesome! Thank you very much! Would you mind moving the startTransition inside the transSync ?

[hugo-vrijswijk]

Awesome! Thank you very much! Would you mind moving the startTransition inside the transSync ?

Yes, done

[rpiaggio]

LGTM