1

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?
0

In the function sending a query to the server before sending it is worth calling the function responsible for using the loader.

What delay would be appropriate?

I refer to the concept: Doherty's threshold

Performance increases when the computer and its users interact at a rate (<400 ms), which guarantees that neither of them will have to wait for the other.

Is it a good idea to disable all actionson the modal dialog during this waiting time?

In the time of waiting for response there are 2 case:

  1. Only the button is inactive (change background color for grey)
  2. Everything in the scope of this action becoming inactive (form, buttons, inputs)

The choice of case is conditioned by code architecture - how dynamic is the solution? Does it send a request when one character changes in the input? Or request is sending after button click?[react-hooks]

How to visually indicate that nothing can be done until the server response arrives?

  • Change color of elements to grey
  • Using cursor:disabled
  • implement div with loader overriding the action section

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.