Disabling a modal dialog while waiting for the server
We're making a react web-app for business users
We use a modal dialog for editing data. When the user clicks "save", the data get sent to the server. Usually, the server answers pretty fast (< 200 ms), so there's no reason to show any spinner or alike.
I don't want to optimistically assume that the server accepts the data like in this question as it makes everything more complicated and this part is not used that often. Moreover, we don't use frames and re-opening the dialog in case of an error could be rather confusing.
Sometimes, it may take longer (let's say, one second) and the impatient user sending more and more requests could confuse themselves by editing and clicking again and again; especially, when creating a new item).
In the exceptional case when the response takes too long (many seconds), there should be a way of forcibly exiting. I guess, I'd proceed as follows:
- Immediately after clicking "save", disable everything.
- Assuming no response, after some delay, add a visual indication.
- Assuming no response, after some longer delay, add a way of way of forcibly exiting the dialog.
My questions:
- What delays would be appropriate?
- Is it a good idea to disable all actions (both editing the fields and sending the form) on the modal dialog during this waiting time?
- How to visually indicate that nothing can be done until the server response arrives?