Isolating Table Loading State Without Triggering Higher-Level Loaders
Hey I have my app with list of users inside table with basic pagination (page number, page size).
Everything is working fine, but I wanted to make loading spinner inside my table whenever the request will be taken longer for example due to bad connection. I am using tanstack query + tanstack router.
I tried doing this with useTransition hook from react and tried to render loader inside table whenever isPending from returned from hook is true but that loader from table was "over written" by the higher loaders for example inside createFileRoute or defaultPendingComponent.
I also tried to wrap whole with Suspense but it also got into the loader inside fallback prop. I would be grateful for any help because I cannot resolve this from days.
My desired behaviour is to just show loading component inside table component when I am changing pages or page size but the "higher" global loader is activated
I found this thread on github which is looking similar to my case but I did not succeed
https://github.com/TanStack/query/discussions/7013
Here is small example in the "posts" tab with a comment inside code. If any code snippets from my real app will be needed I will provide it. Thanks.
https://stackblitz.com/edit/tanstack-router-nkbkre?file=src%2Froutes%2Fposts.tsx
17 Replies
ratty-blushOP•11mo ago
cc: @Manuel Schiller
wise-white•11mo ago
can you please provide exact steps to reproduce (click x, click y, ...)?
also please provide what you would expect to happen instead
ratty-blushOP•11mo ago
yes of course,
1. Click posts tab (there is global loader)
2. Click 5 posts (there is for 1ms inside loader showed and then the global loader again is showed hiding inside loader)
I expext that when changing amount of posts just the inside loader will be displayed (defined inside list) not the global one (defined in defaultPendingComponent)
wise-white•11mo ago
Manuel Schiller
StackBlitz
Router Basic React Query File Based Example (forked) - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
ratty-blushOP•11mo ago
In my app if I define a loader in the place you showed a loading component it will be still not inside my table component, it will be like on the whole screen. So when I change page size the whole view will be in loader instead of the loader only in table
wise-white•11mo ago
so you want an inline loader instead of routers pending component?
ratty-blushOP•11mo ago
yes
I am using the useSuspenseQuery but it is returning isFetching false always
so I tried with useTransistion from react
wise-white•11mo ago
if you want this you cannot use the loader from router
the loader will trigger routers pending component
ratty-blushOP•11mo ago
so how can I capture the boolean if it is loading
to trigger the loader in table
I must use useQuery hook and fetch inside component instead of fetching inside loader and useSuspenseQuery
?
or is there any way with useSuspenseQuery ? because I saw that someone had the similar problem here https://github.com/TanStack/query/discussions/7013
or the question is do I even need to have the loader inside table ? what is the approach to the data inside table when its loading ?
wise-white•11mo ago
if you want to use
useSuspenseQuery with a custom inline loader, you need to handle suspense yourselfwise-white•11mo ago
StackBlitz
Router Basic React Query File Based Example (forked) - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
ratty-blushOP•11mo ago
oh nice, so the ensureQueryData is not needed anymore ?
but is it possible to display the loader next to the data (so the data is still visible)? because now it's turning into the loader from suspense component
wise-white•11mo ago
so I just tried you original example without a default pending component
wise-white•11mo ago
Manuel Schiller
StackBlitz
Router Basic React Query File Based Example (forked) - StackBlitz
Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz
wise-white•11mo ago
I guess this is what you want really?
so we should provide a way in router that you can opt out of the default pending component for a route
ratty-blushOP•11mo ago
when I am switching posts count I cannot see the inside loading
deep-jade•11mo ago
@0xy @Manuel Schiller any updates here?