Show loading state on expensive rerender when changing search params through router.navigate()
This is a demo case of a problem I'm facing in my real app. I have a date picker. Below the date picker are some relatively expensive components - I can feel that the navigation is sluggish because it takes a bit of time for the loading state to kick in
I tried using useTransition so that the expensive parts are rendered concurrently. My hope was that I could use the
isPending prop to render a loading spinner. However, it looks like I got the wrong approach, as it doesn't seem to help at all. Here's a small demo:
https://codesandbox.io/p/github/revosw/tanstack-start-search-param-loading/main
Appreciate any insights on this3 Replies
robust-apricot•4w ago
Tanstack router doesn't support reacts concurrent rendering at the moment, since react does not allow external stores to hook into this transition state yet. Once react adds support for concurrent rendering, Tanstack router will be able to benefit from your transitions
I'm not sure if there is any better suggestions, but some options I've used personally to tackle expensive renders when concurrent rendering isn't available (navigation) are:
1. Render skeleton loaders and then swap them for the actual components inside a transition (since transitions within the page will work).
2. Server side render the HTML for the page (nothing fancy since server components don't exist in an SPA)
robust-apricot•4w ago
Here is a github issue that I've been using to keep up with this, but the TLDR; on transitions is that as soon as react supports it, they'll update the router to support it
https://github.com/TanStack/router/discussions/289
GitHub
Routes transitions don't use transitions? · TanStack router · Dis...
Hi, Maybe I missed something (very likely) but it seems to me that when we transition from one route to another, the preload is not happening in a react transition (the one you get by using useTran...
adverse-sapphireOP•4w ago
Thanks a lot for the info 👍🏻