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
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
