keepPreviousData with useSuspenseQuery

Hello, I'm using router with query and was wondering if this pattern can be done in a better way:

I want to have data available right away on the inital load so I don't need to implement loading screens, but on client navigation I just want to use previous data until the new one is fetched.

when using useSuspenseQuery + awaiting ensureQueryData in loader it works that way but since my UI depends on search params when changing route I still see previous params until loader finishes fetching the data. In my case im using a select component like this:

const {value} = Route.useSearch()
const navigate = Route.useNavigate()

return (
<div>
  <Select currentValue={value} onChange={(val) => navigate({to: "/", search: {val}})}
</div>
)

const {value} = Route.useSearch()
const navigate = Route.useNavigate()

return (
<div>
  <Select currentValue={value} onChange={(val) => navigate({to: "/", search: {val}})}
</div>
)

const {value} = Route.useSearch()
const navigate = Route.useNavigate()

return (
<div>
  <Select currentValue={value} onChange={(val) => navigate({to: "/", search: {val}})}
</div>
)

const {value} = Route.useSearch()
const navigate = Route.useNavigate()

return (
<div>
  <Select currentValue={value} onChange={(val) => navigate({to: "/", search: {val}})}
</div>
)

I see 2 potential solutions but they both seem non-ideal

1. Using prefetch query in loaders but awaiting it only on the server and then using useQuery + keepPreviousData, the issue here is that the data is still T | undefined
2. Detaching UI state from search params

Is there a 3rd better way that I'm missing?

keepPreviousData with useSuspenseQuery

Similar Threads

Similar Threads

Similar Threads