React Show Loading Spinner on Submit Click Tutorial

Last updated on: by Digamber

You click on the submit button, form is processed, but nothing is being shown to you. Such a type of negligence leads to a bad user experience.

To tackle this problem, in this tutorial, we will show you how to show loader or spinner in submit button while the form is processing. Also, we will help you comprehend how to disable the button from clicking while the loading spinner is visible in React app.

To design the form, we will use the Bootstrap library. Bootstrap offers tons of UI components under one hood; we will use the form input fields, buttons, grids; however, this is just the tip of the iceberg.

There are a plethora of useful UI modules that you can use to build your web project, which you may check out here.

Let us start answering regarding how to display a loading indicator on submit button click in React.

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

Set Up React Application

In the first step, we will introduce you to set up a new React application.

If you are familiar with app installation, jump on the further step.

Otherwise, open the terminal; after opening the terminal, type the command on the console. Execute the command to download the React app.

npx create-react-app sky-app

A new project has been created, time is to get into the project directory.

Go ahead with the below command to enter into the app’s folder.

cd sky-app

Add Bootstrap Library

We are going to use Bootstrap package, it will surely amplify as well as spruce up the UI design process.

On the command line tool, type the command. Hit enter to order CLI to add the package into the React app.

npm install bootstrap

Now, head over to App.js, in this file you have to add the Bootstrap CSS path.

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

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

Add React Hook Form Package

In the next step, we will install the React hook form package. This package offers a powerful API that makes the form handling process utterly easy.

Enter the given command and execute it.

npm install react-hook-form

Create React Hook Form Component

In this step, we will teach you how to create a form component, use the useForm() module to build the form and set the form state.

Let us head over to components/ folder, afterwards make sure to create UserForm.js file.

And, do not forget to put the code into the file.

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>
  )
}

Next, first thing is to to import useForm module from ‘react-hook-form’ package.

In general, the user enters some data in a form and sends it over to the server through form submission.

This whole process is handled through the API; however, we will not use any API in this example.

Rather, 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.

Register Component in App Js

You are going to register the UserForm component into the App.js file.

App js is the primary component; registering the component here will 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>
  )
}

Start Development Server

To this point, we have completed all the formalities. Now, the time is to start the development server.

In React, it is simple and effortlessly easy to run the server.

npm start

If developing locally, you will see couple of urls to view the app. Given below is one of the url that you can paste on the browser’s address bar and see the app in action.

http://localhost:3000

React Show Loading Spinner on Submit Click Tutorial

Conclusion

Loading spinners play a crucial role in informing users about the progress that is going on. We always love to incline towards the things that we are not comfortable using in our daily lives. A product that has a bad user experience deteriorates the user retention rate.

In this article, we shared tips for implementing a loading spinner on the form submit button in the React form component file.

We are sure you will like this guide and share it with others.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.