TanStackT
TanStack•16mo ago•
1 reply
moderate-tomato

route.tsx pendingComponent is rendering when index.tsx loader runs

I have the following file router structure:

└── routes/
    ├── (hcp)/
    │   └── search
    │       ├── index.tsx
    │       ├── route.tsx


My route.tsx component is just:

import { createFileRoute } from '@tanstack/react-router';
import SearchPage from '@/pages/search';

export const Route = createFileRoute('/(hcp)/search')({
  component: SearchPage,
  pendingComponent: () => <div>Loading From Route</div>
});


Which has the outlet within the SearchPage component.

My index.tsx has a loader:

export const Route = createFileRoute('/(hcp)/search/')({
  beforeLoad: authGuard,
  component: Results,
  pendingComponent: () => <div>Loading From Index!</div>,
  validateSearch: zodSearchValidator(searchQueryParamsSchema),
  loaderDeps: ({ search }) => search,
  loader: ({ deps }) => {
    const queryOption = getSearchQueryOptions(deps)
    return queryClient.ensureQueryData(queryOption)
  },
})


The issue is I'm seeing Loading From Route when the index is fetching. Does anyone know what is going on and how I can seperate the loading. The route.tsx doesn't need the data and I want the structure to resolve and have the loading within my outlet.
Was this page helpful?