React Hook Form Display Loader on Form Submit Tutorial

Have you ever clicked on a form button and waited for the response. But somehow, you are not being notified of your action. This problem refers to UX, which creates a ruckus in users’ minds and makes us hasty to leave the operation.

In this responsive tutorial, we will teach you how to show the loading spinner in the form button in React app while disabling the form submit button. To implement such a feature, we will use the React hook form package.

React hook form is a super library that lets you make performant, flexible, and extensible forms with easy-to-use validation.

We are not using any API to submit the form; rather, we will go with the JavaScript Promise object and attach the promise to the handleSubmit property of the useForm object. In response, it will return the response after clicking on the form submit button.

How to Show Loading Spinner on Form Submit in React Js App

  • Step 1: Create React Project
  • Step 2: Install React Hook Form
  • Step 3: Install Bootstrap
  • Step 4: Build Form Component
  • Step 5: Use Form Component
  • Step 6: Start React Server

Create React Project

Before we go further, we will start with installing or downloading a new React application.

If you have already created the new project, you can go to the next step.

Else, use the suggested command to manifest the new react project on your system.

npx create-react-app happy-kitty

As soon as the project is ready and completely installed, dive into the app folder.

cd happy-kitty

Install React Hook Form

Once you safely landed in the app directory, use the command to add the React Hook Form package.

npm install react-hook-form

Install Bootstrap

If you are not comfortable writing custom CSS, don’t worry; we have a ready-made solution for you.

Bootstrap, this powerful solution, will reduce the CSS writing time drastically.

Hence, open the terminal or command prompt, enter the given command, and press enter to begin the Bootstrap package installation process.

npm install bootstrap

In order to harness the power of Bootstrap, it needs to be imported into the App.js file.

Go ahead, copy the given code and paste it into the app js.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

export default function App() {
  return (
    <div>
    </div>
  )
}

Build Form Component with React Hook Form

Managing application functionalities in React is easy. Every time you create a new feature, ensure to create a new component file, and start writing code into it.

Likewise, create a SimpleForm.js file within the components folder.

After the file creation process is accomplished, move into the component/SimpleForm.js file and include the given code into the file.

import React from 'react'
import { useForm } from 'react-hook-form'

export default function SimpleForm() {
  const { handleSubmit, formState } = useForm()
  const { isSubmitting } = formState

  function onFormSubmit(data) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve()
      }, 5500)
    })
  }

  return (
    <div className="container mt-4">
      <h2>React Hook Form Display Loader on Submit Example</h2>

      <form onSubmit={handleSubmit(onFormSubmit)}>
          <div className="d-grid mt-5">
              <button disabled={isSubmitting} className="btn btn-dark">
                {isSubmitting && (
                  <span className="spinner-grow spinner-grow-sm"></span>
                )}
                Submit
              </button>
          </div>
      </form>
    </div>
  )
}

Use Form Component

Head over to App.js file, in this file you have to first import the simple form component.

Secondly, declare the simple form component within the app function.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import SimpleForm from './components/SimpleForm'

export default function App() {
  return (
    <div className="App">
      <SimpleForm />
    </div>
  )
}

Start React Server

Without further ado, we have to start the React application’s server. Get ready to use the following command.

npm start

Take this URL to address browser of the browser, paste it there and hit enter.

http://localhost:3000

After the browser comes into running state, you may test the feature:

React Hook Form Display Loader on Form Submit Tutorial

Summary

The primary focus of every product owner is to make his product facile as easy as it can be. Let us forget others, talk about you. How often do you go away from the sites where the site’s user experience is pathetic.

While surfing a site, it is obvious no user bother to think. User experience is a dish of multiple factors.

In this guide, we tried to cover some of the UX aspects in React js application. We learned how to show loading spinner in React application after the form is submitted; the React hook form package is used to create the simple form.

Apart from that, we learned how to use the useForm API to set up the form and form state.

We hope you would appreciate our little efforts.