Web Application API action synchronicity

Question

The title is vague, sorry.

The issue to which I am referring to I will illustrate with 2 examples.

1)You fill in a form to add a new resource and click save, the request commences to the server and it gets added to the db and a success message along with the db object gets sent back to the client. In the mean time the client has been in a loading state but at the end of that loading state the client can either display 'success' or 'error

2)You fill in a form to add a new resource and click save, the new resource gets added to local state and is visible/editable immediately. The client then sends an api request to the server and the server succeeds or fails. The client must now either update the record in local state (with the correct Id) or show the user some kind of action, in the case the api request has failed.

Essentially it comes down to reacting immediately on the client or keeping it in sync with the server. I wanted to get thoughts and explore what the best possible user experience would be.

Answer 1

You should never leave a user in a state of doubt. Always give feedback as to what is happening.

1) If you're loading state is explaining in clear, understandable language, that the submit is being checked or saved and that it will be done momentarily, there should be nothing wrong with that.
But how long could such a request take? Are we talking milliseconds, seconds, minutes?

2) In this case you should make clear the form is still submitting and the user should wait. The risk of the user leaving the page before an error pops up is greater than in the first situation, because the user might think he already successfully submitted the form. In this case, you should also consider if giving the user the ability to directly change and resubmit the form while the first one is still being processed, will cause some conflict or other trouble.

When talking about forms, it's good practice to validate the form client side before it is being submit. This will give the user instant feedback. I don't know if you're already doing this, but couldn't you minimise the chances of the submit failing to possibly nihil by making sure the format of the form is what the database expects? Wouldn't the only thing that go wrong be server related? It being offline or something.

Answering the question as what would give the best user experience... Mostly the second option in my opinion.
If the waiting time is long (like multiple minutes or hours) and is preventing the user from moving forwards. Try considering saving the form and contacting the user in some way when it's failed, giving them the link to the form pre filled with what they had.
If you have a use case where the users fills in multiple forms, one after the other, you should consider allowing them to move forwards on the next form and returning any failed form (with all data saved) afterwards. If the waiting time is just seconds and it's important the user waits for the submit to be completed (because numerous things could go wrong and the form is very, very important), go for just the loading state.
If the wait is milliseconds, you can keep the message simple. If the wait is 4 seconds or up, try making the wait a bit more engaging/entertaining.