UI out of sync with data when triggering action + navigation

[emilbryggare]

Excalidraw: https://excalidraw.com/#json=2YJ09LuQWiHc9vppzuOYn,Sm1WoU1qqSyDRt50cuVtFA

In my app, I’ve a listing page and detail page that show the number of votes a post has received. Reddit style.

I’m using useFetcher to vote and Link to navigate to the post detail page. If I click on the vote button (fetcher) and then Link (very fast) the resulting UI will (sometimes) end up out of sync with the database, When the Link navigation happens before the fetchers action has saved the data in the database the resulting UI will be out of sync with the database. The data revalidations that the fetcher triggers are canceled by the browser.

Reproduction here https://github.com/emilbryggare/remix-race-condition. I added a sleep in the fetchers action to make it easier to trigger.

Adding comment from @kiliman on the Discord:

Interesting use case. Seems like Remix should pause navigation while an action is in flight, so it can complete revalidation, then navigation.

Any tips on how to handle this? (Except for making the backend faster...)

[emilbryggare]

I just stumbled on this behavior again for another use case, but similar flow e.g. a fetcher.Form submit quickly followed by Link navigation.

[sergiodxa]

This happens because Remix is aborting the previous request, but your Link navigation is happening faster than what the server takes to process the previously aborted request (an aborted request is still processed server-side).

You could disable all links/forms until a navigation finish.

[emilbryggare]

Thanks for the clarification - that is what I thought. I see a lot of scenarios of where this can/will happen.

You could disable all links/forms until a navigation finish.

I appreciate the suggestion. Would it not cause a UI flash (if we want to show that links/buttons are disabled) and/or result in dead/missed clicks due to suddenly disabling unexpected parts of the UI in response to a user action.

I think I would prefer Kiliman's idea to

Seems like Remix should pause navigation while an action is in flight, so it can complete revalidation, then navigation.

Or if Remix could continue the navigation as normal and revalidate all data as the action in flight is completed... Just thinking out loud here.