How to Implement a Loading Spinner on Submit Button in React 18

Last Updated on by in React JS

Learn how to display a loading spinner on the submit button click in a React application, giving concurrent responses to users about request submission, enhancing the user experience, and preventing multiple submissions.

The absence of a visible response upon form submission can lead to a poor user experience. This tutorial focuses on guiding developers on implementing a loading spinner within a submit button and display loader on button click event in the React application.

Additionally, it covers the process of programmatically disabling the button during the spinner’s display to enhance user interaction.

Step 1: Setting Up the 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

Step 2: Adding 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 --legacy-peer-deps

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

Step 3: Installing 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 --legacy-peer-deps

Step 4: Creating New 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.

Step 5: Registering 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>
  )
}

Step 6: Starting the 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 are pivotal in informing users about ongoing operations, significantly contributing to a positive user experience.

Implementing these loaders within form submit buttons in React applications can drastically improve user interaction, and user retention rates.

In React realm, this guide meant to assist web developers in comfortably integrating loading spinners in functional components with React hooks, aiming to provide an optimal user experience.

Frequently Asked Questions

Why is displaying a loading spinner important in web applications?

Loading spinners provide visual feedback to users about ongoing processes, improving user experience by indicating activity.

How can I enhance the spinner design for better engagement?

Customizing spinner styles and integrating animations can elevate the visual appeal and user interaction.

Are loading spinners crucial only for form submissions?

No, loading spinners can be used in various scenarios like fetching data, submitting forms, and processing actions to maintain user engagement.

Is it possible to integrate loading spinners without third-party libraries like Bootstrap?

Yes, custom CSS and JavaScript can be employed to create loading spinners tailored to specific project requirements.