React Tutorial- How To Show Loading Spinner On Click Example

Sometimes, it happens that nothing is being shown when the submit button is clicked and the form is processed.

So, in this tutorial, we will get to see how to show a loader or spinner the submit button while the form is processing. Also, we will be learning how to disable the button from clicking while the loading spinner is visible in a React app.

We will be using the Bootstrap Library for this purpose since Bootstrap provides many UI components. We’ll use the form input fields, buttons, and grids.

 

How To Display Loading Spinner On Submit And Disable Submit Button In React

Step 1- Set Up React Application

Step 2- Add Bootstrap Library

Step 3- Add React Hook Form Package

Step 4- Create React Hook Form Component

Step 5- Register Component In APp Js

Step 6- Start Development Server

 

 

Now, let’s learn in detail:

Step 1- Set Up React Application

First of all, we have to install or download the new React app.

For this, we will open the terminal after which we type the command on the console. THen, we need to execute the given command in create-react-app:

npx create-react-app sky-app

After creating the new React app, we now get into the project directory. Then, we implement the following command into the app’s folder:

cd sky-app

 

Step 2- Add Bootstrap Library

Here, we will install the Bootstrap package. It will amplify and spruce up the UI design process. Further, we have to type the below command on the command-line tool. Then, we hit enter to order CLI to add the package into the React app:

npm install bootstrap

Here, we head over to the App.js file in which we will add the Bootstrap CSS path:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
export default function App() {
  return (
    <></>
  )
}

 

Step 3- Add React Hook Form Package

In the third step, we require to install the React Hook form package. The package offers a powerful API which makes the form handling process quite simple and easy.

Then, the following command will be implemented:

npm install react-hook-form

 

Step 4- Create React Hook Form Component

Now, we have reached that point of the guide where we create a form component. We use the useForm() module for building the form and set the form aside.

Then, we have to head over to the components/ folder. Afterward, we have to make sure to crate UserForm.js file in which we execute the given code:

import React from 'react'
import { useForm } from 'react-hook-form'
export default function UserForm() {
  const { handleSubmit, formState } = useForm()
  const { isSubmitting } = formState
  function submitForm(data) {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve()
      }, 4000)
    })
  }
  return (
    <div>
      <h2>Display Loader on Form Submit in React</h2>
      <form onSubmit={handleSubmit(submitForm)}>
          <div className="mt-2">
              <button disabled={isSubmitting} className="btn btn-danger">
                {isSubmitting && (
                  <span className="spinner-grow spinner-grow-sm"></span>
                )}
                Submit
              </button>
          </div>
      </form>
    </div>
  )
}

Further, we need to import the useForm module from the ‘react-hook-form’ package.

Generally, users enter the data in a form and then send it over to the server through the form submission. The complete process is handled through the API. But we will not be using any API in this example.

Instead of it, we will use the Promise object with setTimeout() method to set the response.

The time we define in the setTimeout method, the loader will spin till that time is over.

 

Step 5- Register Component In App Js

Here, we will register the UserForm component into the App.js file.

Registering the component in App js would make the component available globally in-app:

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import UserForm from './components/UserForm'
export default function App() {
  return (
    <div className="container">
      <UserForm />
    </div>
  )
}

 

Step 6- Start Development Server

Now, we reach the point where we have to start the development server.

We will use the below command to run it:

npm start

 

Conclusion

As we know loading spinners play a very significant role in making the users aware of the progress going on while in the process.

So, in this tutorial, we have learned how to implement a loading spinner on the form submit button in the React form component file.

Hope that you have found this concept quite useful to use in your React app and also an easy one to implement.