Suspense + useTransition + loading indication on navigation
reacttypescript
Hey! I'm trying to find info if I can hook up a react suspense useTransition into the routing layer.
Originally I did this with react-router declarative mode with a custom history API object that wrapped the state change in my own useTransition. This let me show a global loading indicator when navigating to routes that had suspending components. However, it seems all new development is going into data or framework mode, both of which blindly wrap all navigations in a startTransition without ever exposing the "Transition pending" signal, which totally prevents showing a loading indicator.
I'm investigating switching to tanstack router. I see a ton of documentation about how Tanstack Query supports suspense, but I'm unable to find anything at all for how router interacts with it.
So, I guess my questions are:
- Does tanstack router wrap navigations in a startTransition or useTransition?
- If so, does it expose the transition pending value?
- If not, can I wrap the router's route+state changes in my own useTransition hook to produce my own suspended navigation + loading indication?
Originally I did this with react-router declarative mode with a custom history API object that wrapped the state change in my own useTransition. This let me show a global loading indicator when navigating to routes that had suspending components. However, it seems all new development is going into data or framework mode, both of which blindly wrap all navigations in a startTransition without ever exposing the "Transition pending" signal, which totally prevents showing a loading indicator.
I'm investigating switching to tanstack router. I see a ton of documentation about how Tanstack Query supports suspense, but I'm unable to find anything at all for how router interacts with it.
So, I guess my questions are:
- Does tanstack router wrap navigations in a startTransition or useTransition?
- If so, does it expose the transition pending value?
- If not, can I wrap the router's route+state changes in my own useTransition hook to produce my own suspended navigation + loading indication?
