#How to fix slow UI update on navigation using Link?

17 messages · Page 1 of 1 (latest)

compact dagger
#

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...

sudden lily
#

this can be anything. can you give more details?

compact dagger
#

How to fix slow UI update update on navigation using Link?

sudden lily
#

ideally a minimal reproducer

compact dagger
#

I'm using Tanstack start and convex. It seems when the tab has not been used for some time, it often takes a bit.

#

How to fix slow UI update on navigation using Link?

#

@sudden lily I've updated the description now.

sudden lily
#

this sounds like your loader data is stale and is loaded again?

#

you can inspect the behavior using the router devtools

compact dagger
#

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.

sudden lily
#

do you have pending components setup?

compact dagger
#

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?

sudden lily
#

typically you would call ensureQueryData in the loader

#

then you can configure pendingComponent per route or a defaultPendingComponent

compact dagger
#

Okay thanks for the suggestion. I will see to it 🙂