How to combine defer/Await with useNavigation loading?

[jrr]

I have a component on my page backed by a slow query, so I throw up a spinner with defer and Await, like in the Streaming guide. This works great for the initial page load.

But there are also some query params that affect the query (e.g. a chart with a date range). These params are altered with setSearchParams() from useSearchParams.

I'm observing that when the search params are altered, the suspense loading state doesn't appear.

Some related issues suggest using useNavigation's state, but I haven't found an elegant way to combine them.

Is there a way to get a promise out of useNavigation(), to trigger the Suspense with? Something like this:

<Suspense fallback={...          } >
          <Await resolve={loaderData}>{(loadedData) => { ... }}</Await>
          <Await resolve={useNavigationLoadingPromise}><></></Await>
</Suspense>

Does anyone have an example of how they've combined useNavigation state with defer/Await? I want spinners both on the initial load and on subsequent navigation.

remix-run/react-router#10638
remix-run/react-router#10816

[andrewbarnesweb]

This behaviour is by design. I got around it (since I'm using SPA version) of the hack of just returning the promise.

#9572 suggestion is to opt in to the single fetch functionality. (#9572 (comment))