How can I prevent the parent route from showing the pendingComponent while the child route is loading data?

[Hazihell]

This is my setup: I have a folder named test with two files, index.tsx and route.tsx. This makes index.tsx render as an Outlet inside route.tsx under the path /test. Only the index.tsx route has a loader, which uses loaderDeps and deps params to extract the search params in its loader. The problem is that every time the search params change, the pendingComponent is shown for the parent route (route.tsx), but I want it to appear only for the child (index.tsx). How can I achieve this? I also tried converting route.tsx into a layout with the _ prefix, but the same issue occurred.

I am using Tanstack Query for the fetching, with queryClient.ensureQueryData in the loader and useSuspenseQuery in the route component.

[Hazihell]

I switched useSuspenseQuery with useQuery and it's working as I was expecting now.