Indicating form submission status
It’d be great if we could indicate to the user that their form data is being sent to our application servers. The GitHub repository for this book contains a spinner graphic and some CSS that we can use. All that our React component needs to do is display a span element with a class name of submittingIndicator.
Before we write out the tests, let’s look at how the production code will work. We will introduce a new submitting boolean state variable that is used to toggle between states. It will be toggled to true just before we perform the fetch request and toggled to false once the request completes. Here’s how we’ll modify handleSubmit:
...
if (!anyErrors(validationResult)) {
setSubmitting(true);
const result = await global.fetch(...);
setSubmitting(false);
...
}
...
If submitting is set to true, then we will render the spinner graphic. Otherwise, we will render nothing...
