T
TanStack•16mo ago
adverse-sapphire

Getting access to the isLoading state when using queryClient.ensureQueryData() within TSR

I am using Tanstack router, along side Tanstack Query to fetch data for my route. When I navigate from one route to another, I wanted to display a loading spinner on the current page, while data is being fetched for the destination route. The below code snippet is what I'm working with. 
export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context.
loader: async({context: {queryClient}}) => {
// At the moment I display some kind of a loading event using the below hack.
document.body.style.cursor = 'wait'
const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn()
  })
)
// And after the data fetch completes I set the mouse pointer back to default
document.body.style.cursor = 'auto'
}
})
export const Route = createFileRoute('/some/desination/route')({
component: DesinationComponent,
// I do pass the Tanstack queryClient via context.
loader: async({context: {queryClient}}) => {
// At the moment I display some kind of a loading event using the below hack.
document.body.style.cursor = 'wait'
const data = await queryClient.ensureQueryData(
  queryOptions({
    queryKey:['some key'],
    queryFn: myFetchFn()
  })
)
// And after the data fetch completes I set the mouse pointer back to default
document.body.style.cursor = 'auto'
}
})
Is their a cleaner approach, to getting access to the isLoading event and how do I access that event on my current route component, so I can show some kind of a loading spinner during the data fetch ? On the current route component, can I some how access the loading event by doing something like 
// Where RouteForTheDestinationPage is a Route alias for the destination page.
const { isLoading } = RouteForTheDestinationPage.useLoaderData()
// similar to how I would access isLoading via useQuery
// Where RouteForTheDestinationPage is a Route alias for the destination page.
const { isLoading } = RouteForTheDestinationPage.useLoaderData()
// similar to how I would access isLoading via useQuery
2 Replies
optimistic-gold
optimistic-gold•16mo ago
I am using 'pendingComponent' to achieve this behaviour. 🤷
adverse-sapphire
adverse-sapphireOP•16mo ago
Wouldn’t pendingComponent cause the existing page to disappear ? I wanted to show a loading spinner while still retaining the existing page. I read the code you posted (before deleting it), but that won't work as your loading indicator is in the Posts component. If the user is on a parent component before Posts, I want to render the loading indicator on the parent component. In short the experience I'm trying to build is the user clicks a link on the parent component to a new component say (Posts). There should be a spinner on the parent component until all the data for Posts is ready, and then it navigates to Posts when it's ready. @Tanner Linsley any thoughts on this ?

Did you find this page helpful?