T
TanStack•12mo ago
deep-jade

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

I have the following file router structure: 
└── routes/
    ├── (hcp)/
    │   └── search
    │       ├── index.tsx
    │       ├── route.tsx
└── 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>
});
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)
  },
})
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.
1 Reply
deep-jade
deep-jadeOP•12mo ago
I tried changing it to a _layout.tsx file as well and still the same issue

Did you find this page helpful?