Backgrounding and aborting actions #6

👋 Heya! At Unsplash we've been trying to incorporate actions into some new features, but one thing that keeps coming up is the fact that pending actions block the user from browsing around the site when using a Suspense-enabled router (reduced test case here based on the Suspense-enabled router example from the React docs).

A simple example is the bookmark button and add to collection form. We want to use actions for these operations so we can take advantage of things like useOptimistic, but if the API request is slow for some reason, we don't want to stop the user from browsing around the site.

Abort pending actions on navigation

One option that was mentioned on Bluesky was to abort the action. However, it's not clear how to do this using modern routers/frameworks (we need an abort signal that represents the next navigation?).

Continue running actions in the background

Taking a step back, it doesn't really make sense to abort these actions, rather we want them to continue running in the background (fire and forget). I'm curious if there's anything in the pipeline that would help with this?

Keeping track of long running actions

Another example is our bulk download button, which is a long running action whilst we prepare a large zip.

Again we weren't able to use actions for this due to their blocking nature.

This one can take a long time to complete, so ideally we would let users browse around the site and continue to run the action in the background. This one is slightly different in that we want to keep track of the state of the action, so that if the user returns to this page, we can continue to show the action's progress. I'm curious if there's anything in the pipeline that would help with this, or perhaps it doesn't make sense to use actions for this one.