How do I avoid pendingComponent being shown again after first load?

[brunoti]

Let's say I have a route, with a loader that depends on a search param called search.

This search param is updated based on user input for searching data inside the router. After first load I don't want to show pending component again, as it would rerender everything. I want to be able to keep the user at the same place and not call the loader again but now only the search params.

Is that possible?

[rostero1]

I wonder if this is a bug instead of a feature

[rostero1]

It appears that the pendingComponent will display when navigating to the same page and updating just the parameters only when the loaderDeps is used. I'm not sure why that is. It seems that the loader code is still called whenever the loaderDeps option isn't run.

Here's a demo: https://stackblitz.com/edit/github-nnbjygkg-wci72ac4?file=src%2Fmain.tsx

[rostero1]

With the Deps tab, I'm also I'm curious why there is such a delay after you hit Next between when "Pending: Yes" is shown and the pendingComponent is rendered

[rostero1]

Maybe related: #2990

[rostero1]

Discussion in discord:

createRouter({
   routeTree,
   defaultRemountDeps: ({search, params}) => params,
})

[arackaf]

Have you tried setting pendingMs ? I think that delays the showing of the pending component for X ms, on subsequent navigations. But I believe it's ignored for the initial page load (the pending component is showed immediately, when first rendering the web app).

I think - obv confirm :)

[rostero1]

Thanks. That got rid of the initial delay between hitting next and it loading.

[arackaf]

Honestly I think you might want to “graduate” to react-query. Use the loader to prefetch whatever queries your route uses

As search params change, update the queries.

You could even still use the pendingComponent if you use useSuspenseQuery, and to avoid existing content from suspending when search params change you could use useDeferredValue (iirc, I’m afk) to feed your query params.

Examples here https://frontendmasters.com/blog/tanstack-router-data-loading-2/

[rostero1]

I think this is the way to go. Thanks for the article. I was able to write a demo that met my needs.

[akrynski-1]

I think pending component should not be shown on subsequent navigations to the same route.
It makes user experience worse.
Increasing pendingMs is not a good solution either, it would delay showing pending component on first navigation.
Using useSuspenseQuery() is even worse because it shows fallback immediately.