When a client-side action needs to be validated from server-side, is it better to make the user wait or 'undo' the action if validation fails?

Question

As written in the title, I'm wondering what is generally considered a better User Experience in situations where performing an action on the client-side needs to be validated server-side before the action can be completed. Is it better to make the user wait for the server to respond (could be slow depending on connection, the process, etc.), or to update the UI as if the action was successful, and then revert the UI change if the server-validation reports the action as a 'failure'?

An example:

A user is trying to rearrange the order of items in a list within a CMS by drag and dropping the items. The server-side check is needed to validate if the item still exists and it's new location is valid if incase another user have made any changes to the same content (or deleted it).
Should I display a spinner and make the user wait for the validation, or show it as - 'the item is moved' and move it back if an error occurs along with displaying an error message or a notification to let the user know that the operation failed?

Answer 1

User Feedback needs to be very accurate.if the system takes time for a process to complete . the only way is to make the wait time delightful

manipulating the date beforehand is not a good approach as user would feel he has less control over the system if the process fails and he sees the changes bieng reverted

whether pass or fail, as long as user feels he is driving the app, it should be fine

Answer 2

Interesting Question and Flow. I am assuming I have understood your question correctly.

Let us check the flow in this case.
1 : User Does a change(on CMS in this example)
2 : The change is validated from server side on some conditions you need to have a check with.
3 : User should be given the +ve or -ve feedback based on validation.

It is a 3 step process happening.
Understand here the first step is action triggered by the user. In UX, the next step user is expecting is feedback for the action taken. In this case User has made changes and he needs to be updated with what is happening after his action. So, till the validation is complete(depending on time taken for validation) do not make any drastic or significant changes to the UI. You could use some UI tricks like

1. Show a information message on the screen(that is feasible for your layout) as validation pending or In process.
2. May be changing the color of the moved item in the list that is being validated.

Use message language intuitively like "Hold on ! We are validating your changes" or "Sit back & Relax. We'll let you know if the change can be made or any thing like this.

Better than spinner for sure coz spinner can be misunderstood as browser loading or error in network or any other system error.

Post validation. If it is successful. Display the message and mention the change along with it.
Else Show why the change was failed and say that change is not made and it is reverted to its original state.

This will leave no gap in the UX and User will not get frustrated to use your application further.