#Isolating Table Loading State Without Triggering Higher-Level Loaders

28 messages · Page 1 of 1 (latest)

granite orbit
#

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

#

cc: @undone panther

undone panther
#

can you please provide exact steps to reproduce (click x, click y, ...)?

#

also please provide what you would expect to happen instead

granite orbit
#

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)

undone panther
granite orbit
#

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

undone panther
#

so you want an inline loader instead of routers pending component?

granite orbit
#

yes

#

I am using the useSuspenseQuery but it is returning isFetching false always

#

so I tried with useTransistion from react

undone panther
#

if you want this you cannot use the loader from router

#

the loader will trigger routers pending component

granite orbit
#

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

#

?

granite orbit
#

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 ?

undone panther
#

if you want to use useSuspenseQuery with a custom inline loader, you need to handle suspense yourself

granite orbit
#

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

undone panther
#

so I just tried you original example without a default pending component

#

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

granite orbit
#

when I am switching posts count I cannot see the inside loading
{isPending && <h1>inside loading</h1>}