Handling the In Between Time

January 29th, 2021

What do you do if you click on a button... and nothing happens.

Do you click it again? ...Repeatedly? ...Until something happens or you give up and assume it's broken?

This is why you need some code that tells your user:

I hear you and I'm working on it.

There are a few ways to implement this.

• Add a spinner and/or a progress bar

• Change the button text

• Disable the button

• Change the page text / content

It's important to target the user interaction, not just the end result. We want to see some action when we click on something. Users expect some immediate feedback to let them know their click has been heard.

Contact Form

For example, I have a simple contact form.

When you click the send button, it sends me an email and the page content changes to a thank you message.

In between the button being clicked and the success message being displayed, I didn't have anything. You click the button and wait maybe a half or so seconds later "Thanks!".

That in between time needed some content to show the user, I heard your click and things are happening!

Here's my implementation

Code is in React.

First, I added a piece of local state to keep track of that in between time. 'False' when not sending, 'true' when sending.

  const [sending, setSending] = useState(false)

I added it into my onSubmit handler function. When a user clicks the send button, it first sets sending to true. Then, once the message has been sent, it will be set to false.

function sendEmail(event) {
    event.preventDefault()
    setSending(true)

    ...sendForm(...place to send form, event.target).then(
      (result) => {
        setSent(true)
        setSending(false)
      },
      (error) => {
        ...error handling code
    )
  }

Next, I added code to disable the send button, and change the text. When it's clicked, sending is set to true.

<input 
  type="submit"
  ...
  disabled={sending}
  value={!sending ? 'Send' : 'Sending...'}
/>

I also added a spinner, which makes it very clear that the website is loading. Spinners are everywhere. People are used to seeing them and everyone knows what they mean.

Do you need to add a spinner to your site?

Maybe. It's essentially just something to tell people your site isn't broken. You could also add a loading message or some other animation. There are a lot of creative ways to deal with the in between time, the space between the user clicking on something and the website issuing its response. The important thing is that you do handle it, and give your user some clear indication your application is working.

Take care and happy coding!