Any way to replicate the "placeholder query data" functionality with router loaders?

[mkarajohn]

Hello!

With tanstack-query in the components it was fairly trivial to show a proper page spinner on the 1st ever query (using isLoading ) and then show a more subtle loading indicator while also keeping the old data there until the new are fetched, when for example the user changes a filter and waits for new data. (for example adding a slight opacity to the old content while we are isFetching the new data.

Now, I've made the leap to tanstack-router and tried to replace a fairly straightforward page's main query that happened in the Page component with a router loader. It's a simple query that fetches a list and then the user can alter some filters and see different results. It was a prime example of the UX pattern I described in the 1st paragraph.

I am having some difficulties replicating this exact behaviour with loaders however and I'd like to understand if I am doing something wrong or if what I am trying to do is not even supported with this paradigm.

I have read the following:

• https://tanstack.com/router/v1/docs/framework/react/guide/data-loading#consuming-data-from-loaders
• https://tanstack.com/router/v1/docs/framework/react/guide/deferred-data-loading
• https://tanstack.com/router/v1/docs/framework/react/guide/external-data-loading
• https://tanstack.com/query/latest/docs/framework/react/reference/useSuspenseQuery

When I try to use a pendingComponent it gets shown in every new fetch, completely replacing the contents of the route, which is not the behaviour I want (after the initial isLoading I want to show the old data until the new arrive, not a loader).

If I take that out and try to handle new fetches in the component itself, that is simply not possible because as far as the component is concerned all new fetches are immediately successful and I don't get to hook onto isFetching or similar status indicators, so I just get "instant" content changes.

I really would like to transition over to page loaders for various reasons, but this is one thing that is kinda holding me back right now, and I'd like to understand if I am missing something or what I try to do is not supported at all with loaders.

Thanks.

EDIT: The fact that useSuspenseQuery does not have a placeholderData option seems to indicate that what I am trying to do is not supported, at least in the way I am trying to achieve it, but I'd like to know if there is some other way

[mkarajohn]

Bump on this?