How to cancel related action chains in an asynchronous application?

Question

JavaScript

Hello! In web applications, it may be necessary to create functionality that displays actions without waiting for a server response. This is done to make the application feel "faster and more responsive".
For example, let's imagine that we have a "web face" of a file manager. We pressed the "create folder" button, and immediately saw that we had a folder created. Although a request is sent to the server to actually create it, and a response confirming that it was actually created may come in 20 seconds at all (in case of any network delays, for example). Or maybe an error response will come at all, and then our displayed "fake" folder will need to be hidden from the client, as if it never existed (of course, you can display a notification that an error occurred when creating the folder). It's all simple if we are talking about one action, and its cancellation. What if we are talking about a chain of actions?
Example:
1. The user clicked the "create folder" button and the new folder was immediately displayed in the web application.
2. The user moved a file from folder B to folder A.
3. The user performed some other operations not related to folder-A. For example, I renamed some other folder, created another file somewhere, etc.
4. An error message came from the server that folder A was not created.
5. Steps 1-2 should be cancelled. And the actions taken in step 3 should remain in effect, since they did not concern this error.
How would you implement this logic? Can you suggest any design pattern?
And if we also assume that folder-B was deleted in paragraph 3?

Answer 1

It's all simple if we are talking about one action, and its cancellation. What if we are talking about a chain of actions?

In the scenario you describe, you simply don't need to use the optimistic interface.
Yes, this is impossible - how to move a file to a folder without knowing its id? On the client, this, for example, can be implemented, but sending a save request to the server is no longer possible.
In this case, the speed of the interface will have to be sacrificed for code simplification and common sense.
The ideal option is to show the folder right away, but explicitly highlight it as "loading".
Let's take, for example, the web interface of Ya.Disk: exactly this logic is implemented there. Obviously, Yandex has the opportunity to spend money and effort on the implementation of "queues of atomic operations", but they decided that it was not worth it.
And often such an interface can shoot off the user's leg. You helpfully let him change the directory structure, and then it turned out that you need to rewind everything to the very beginning. Do you think the user at this moment will think " Well, at least the interface did not slow down when I did all this " or is it something else?