Race condition between setSearchParams and navigate + questions on how to solve particular use case.

[grizzled yew]

This is a little bit of a long one, but would really appreciate if anyone knows of possible solutions!

So to explain my question, ill start by outlining the setup:

• I have a map at /map that renders some markers, when moving the map i update the search params to include lat + lng values, think google maps.. this means that when reloading the page i can use these coordinates to center the map.
• When clicking on a marker we go to /map/:id, the map route is actually a sort of layout route and renders an outlet so that the /map/:id component is just a little side drawer thing that appears above the map. All good so far.
• Also when clicking on the marker i move the maps center to the position of the marker, there's a callback on the map component so that when its finished moving, i update the search params to the new coordinates.
• It's also possible to move the map when the detail view is open, and i also update the search params there too.

This is where things get tricky, because onMarkerClick, i basically do two things:

1. navigate to the detail view
2. initiate the map.flyTo method that has a delay of 500ms

However, if the detail view's loader takes too long to load, lets say, 1000ms, the map finishes moving and the onMoveEnd callback, that sets the searchParams, cancels the "in-flight" detail view navigation (remix counts them as two separate navigation events and cancels all previous navigation requests). The detail view then never loads.

One way to counter this is to use this on the onMoveEnd callback:
window.history.pushState(null, "", ${currentUrl}?${params}).

In this case, the detail view navigation event isnt cancelled (good), but the params that were used when calling navigation are now stale, so i can see that the coords are set back to whatever they were before the map moved (not good).

Just wondering if anyone has any advice on way to model this type of thing? What i want is for the navigation function to use the latest params.

One option would be to move the loader of the detail view into an API route and use useFetcher to load it on the client, this would make the navigation event almost instant, but there is still a slight chance that there is a race condition

I've bumped up the flyTo delay so that most of the time its quicker than the navigation event, but still i dont like that theres a possibility of it just not navigating

[lucid field]

I'm confused how your params are stale when initiating the navigation in the callback? (after the flyTo finishes)

I think that's the right approach, you just need to solve the stale params issue. I'm guessing it's a "this" context issue.

[grizzled yew]

The params in the callback aren’t stale, the ones in the original navigation are as it ran before the flyTo set it using pushState, so when the navigation event finally resolves it sets the params to whatever they were pre-flyTo, eg the old coordinates

The problem is that when you call navigate it doesn’t actually update the url