only show pendingComponent on initial route load (not when invalidating)
I haven't become crazy familiar yet with the RC, but I have a project on TSS and the best way I found to reliably render the pendingComponent is to not await the server fns in the loader and then use React.use in the routeComponent. The issue here is that when I mutate the data via a form on the page and then use router.invalidate() in the success callback, I get a blip of the pendingComponent. Haven't been able to get the pending delay setting (blanking on the name and left my computer) to prevent this, and I think this would be disorienting for users, so I am trying to find a way around it while leaving the pendingComponent during the initial route load.
Feels weird to store the data in state and then update the state on every mutation to force rerendering of dependent components, but I'm new to React as of the last few months, so maybe I'm thinking about this the wrong way. Either way, is there an article, issue, example, thread, etc. that could point me in the right direction on how to use pendingComponent when loading a route initially but not when invalidating the route?
Thanks in advance!
3 Replies
compatible-crimson•4d ago
Use tanstack query. you can achieve the same thing with a (non awaited) fetch call in the loader and a useSuspenseQuery in the component. I think it will do what you want. I personally havent seen the pendingComponent appear when invalidating the query.
You can even get into optimistic updates or even TanStack DB (once it gets SSR support)
conscious-sapphireOP•3d ago
Yeah I was hesitant to add a dependency just for that one piece of functionality, but your solution makes sense. Thank you!
compatible-crimson•2d ago
understandable tbf but unfortunately the query functionality built into the router is a little limited so tanstack query is needed
let me know if you need help setting it up to work with start and router
docs can be a little outdated