How to handle blocking UI elements while waiting for server response

Question

Lately I've been using React + Formik to create great user experiences. I've a question about blocking the UI when the XHR is still processing.

Imagine a register form with only a sign up button. As soon as the button is clicked I disable the button, it show a loader and sets the cursor to default. All good so far.

In that same view of the webpage there is also a link to "Already have an account? Sign In!" (and a fiew other hrefs). The "Sign In!" part is an URL, which is still clickable. What do I do in this situation? Should I block the "Sign In" link from being clicked?

Because when the user clicks "Sign In!" when no response has been received yet from the backend it either returns 200 registering was successful and redirects. Or it returns a validation error in which case the component is unmounted and React gives errors.

Answer 1

The moment you click the sign up button, you should lose access to the "Already have an account? Login" button. You have two options when "Sign up" is clicked:

(1) Directly disable the login button (greyed out, default cursor, etc.) Very soon they will be taken to a confirmation page. Users are quite used to options being taken away during loading.

(2) Take the user to the confirmation page immediately, even if it takes a second to get the backend's response that says they successfully signed up (or that it failed).

(3) Both.

Answer 2

Well I think take a step back and frame the options that you give to the user, they likely have 2 options available to them at first.

Login or Register

They will either have an account and want to sign in or they don't have an account and will want to register.

So present them with the first step.. a choice to do either but not both at once, once the user chooses either option it then replaces the current choices panel with the appropriate form.

For example: