How to fix slow UI update on navigation using Link?
Hello,
I've noticed that pages occasionally loads very slowly upon navigation. When I click on a menu item, the URL updates, but the UI doesn't respond right away. Sometimes it takes a long time to load, and other times I need to refresh the page to see the changes.
I'm using Tanstack Start with Convex.dev. Some pages contains queries, but I haven't been able to isolate it to routes containing queires.
I'm using Link component for navigation:
https://tanstack.com/router/latest/docs/framework/react/api/router/linkComponent#link-component
Are there any best practices we can follow to prevent this behavior?
Link component | TanStack Router React Docs
The Link component is a component that can be used to create a link that can be used to navigate to a new location. This includes changes to the pathname, search params, hash, and location state. Link...
12 Replies
ratty-blush•9mo ago
this can be anything. can you give more details?
ideally a minimal reproducer
fascinating-indigoOP•9mo ago
I'm using Tanstack start and convex. It seems when the tab has not been used for some time, it often takes a bit.
@Manuel Schiller I've updated the description now.
ratty-blush•9mo ago
this sounds like your loader data is stale and is loaded again?
you can inspect the behavior using the router devtools
fascinating-indigoOP•9mo ago
I haven't been able to reproduce in localhost yet, but I would like to show loading UI / skeletons upon navigation regardless of the data being stale.
ratty-blush•9mo ago
do you have pending components setup?
fascinating-indigoOP•9mo ago
I do use isPending or isLoading in my code for my queries, and based on those, I render the UI:
const { data: flows, isPending } = useQuery(
convexQuery(api.flows.getMyFlows, {
filters: filters,
})
)
Not entirely sure about the difference between the two. I suppose I would like to check for query before load?
ratty-blush•9mo ago
typically you would call
ensureQueryData in the loaderratty-blush•9mo ago
check out our examples. e.g. https://github.com/TanStack/router/blob/a91cfd9e29914437c973bd9c9feec4fd334216a3/examples/react/basic-react-query-file-based/src/routes/posts.%24postId.tsx#L17
GitHub
router/examples/react/basic-react-query-file-based/src/routes/posts...
🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router
ratty-blush•9mo ago
then you can configure
pendingComponent per route or a defaultPendingComponentratty-blush•9mo ago
RouteOptions type | TanStack Router React Docs
The RouteOptions type is used to describe the options that can be used when creating a route. RouteOptions properties The RouteOptions type accepts an object with the following properties: getParentRo...
fascinating-indigoOP•9mo ago
Okay thanks for the suggestion. I will see to it 🙂
ratty-blush•9mo ago
if this does not help, please create a minimal reproducer and we can have a closer look