pendingComponent shows on search param changes even with cached data

[Amine-AD]

Hi everyone,
I'm experiencing an issue where my route's pendingComponent is being triggered every time search parameters change, even when I have cached data available. I'd like the skeleton to only show on the initial load, not on subsequent searches/filters.
My Setup:

import {
  type FrontendQuerySchema,
  frontendQuerySchema,
} from '@backend/src/helper/schema-validation'
import { IconDownload, IconTriangleSquareCircle } from '@tabler/icons-react'
import { queryOptions, useSuspenseQuery } from '@tanstack/react-query'
import { createFileRoute, Link } from '@tanstack/react-router'
import { PlusIcon } from 'lucide-react'
import { getCategoriesQuery } from '@/apis/categories'
import { ButtonSkeleton } from '@/components/button-skeleton'
import { EmptyState } from '@/components/empty-state'
import { ErrorComponent } from '@/components/error-component'
import { CategoriesTable } from '@/components/pages/categories/table'
import { TableSkeleton } from '@/components/table-skeleton'
import { TitleSkeleton } from '@/components/title-skeleton'
import { Button } from '@/components/ui/button'

export const categoriesQueryOptions = (params: FrontendQuerySchema) =>
  queryOptions({
    queryKey: ['categories', params],
    queryFn: () => getCategoriesQuery(params),
    staleTime: 5 * 60 * 1000, // 5 minutes
    placeholderData: previousData => previousData,
  })

export const Route = createFileRoute('/_appLayout/categories/')({
  component: CategoriesPage,
  validateSearch: frontendQuerySchema,
  loaderDeps: ({ search }) => search,
  loader: async ({ context: { queryClient }, deps }) => {
    await queryClient.ensureQueryData(categoriesQueryOptions(deps))
  },
  errorComponent: ErrorComponent,
  pendingComponent: () => (
    <div className='space-y-6'>
      <div className='flex items-center justify-between'>
        <TitleSkeleton />
        <ButtonSkeleton />
      </div>
      <TableSkeleton cells={3} />
    </div>
  ),
})

function CategoriesPage() {
  const searchParams = Route.useSearch()

  const { data, isFetching, isPending, isLoading } = useSuspenseQuery(
    categoriesQueryOptions(searchParams)
  )

  console.info('isFetching', isFetching)
  console.info('isPending', isPending)
  console.info('isLoading', isLoading)

  if (!(data.data.length || searchParams)) {
    return (
      <EmptyState
        className='mt-24'
        description="You haven't created any categories yet. Get started by creating your first category."
        icon={IconTriangleSquareCircle}
        title='No Categories Yet'
      >
        <div className='flex gap-2'>
          <Button>
            <PlusIcon />
            Create Category
          </Button>
          <Button variant='outline'>
            <IconDownload />
            Import Category
          </Button>
        </div>
      </EmptyState>
    )
  }

  return (
    <div className='space-y-6'>
      <div className='flex items-center justify-between'>
        <h1 className='font-medium text-2xl'>Categories List</h1>
        <Button asChild>
          <Link to='/categories/create'>
            <PlusIcon />
            Create a category
          </Link>
        </Button>
      </div>
      <CategoriesTable data={data.data} isLoading={isFetching} pagination={data.pagination} />
    </div>
  )
}

When users type in the search input (which updates the search URL param), the pendingComponent skeleton shows every time, creating a jarring experience. I want:

✅ Skeleton on initial page load (first visit)
❌ No skeleton when searching/filtering (should show existing data with a loading indicator)

Maybe i am doing something wrong, what is the better way to handle this case.

Should i use useQuery instead of useSuspenseQuery and handle loading manually or i still can use useSuspenseQuery but i must change something.

Any guidance would be much appreciated! Thanks for the amazing library 🙏

Environment:

@tanstack/react-query: ^5.85.3
@tanstack/react-router: ^1.121.2