implement a load spinner when submitting a form in reactjs

Question

I'm trying to implement a load spinner when I submit a form. since I'm new to this whole react thing, I need some help.

What i exactly want is, When I click on the submit button it should show the load spinner, then load the table. now it shows the spinner even before clicking the submit button.

here's my code

    import React from "react";
import { LineWave } from "react-loader-spinner";
import { useState, useEffect } from "react";
import Table from "./Table";
function Main() {

     const [tableData, setTableData] = useState([])
     const [formInputData, setformInputData] = useState(
          {
               Name: '',
               email: '',
          }
     );
     const [loading, setloading] = useState(false);
     useEffect(() => {
          setloading(true)
          setTimeout(() => {
               setloading(false)

          }, 4000)
     }, [])

     const handleChange = (evnt) => {
          const newInput = (data) => ({ ...data, [evnt.target.name]: evnt.target.value })
          setformInputData(newInput)
     }

     const handleSubmit = (evnt) => {
          evnt.preventDefault();
          const checkEmptyInput = !Object.values(formInputData).every(res => res === "")
          if (checkEmptyInput) {
               const newData = (data) => ([...data, formInputData])
               setTableData(newData);
               const emptyInput = { Name: '', email: '' }
               setformInputData(emptyInput)

          }
     }

     return (
          <div className="container">
               <div className="row">
                    <div className="col-sm-8">
                         <div className="col">
                              <input type="text" onChange={handleChange} value={formInputData.Name} name="Name" className="form-control" placeholder="Name" />
                         </div>
                         <div className="col">
                              <input type="email" onChange={handleChange} value={formInputData.email} name="email" className="form-control" placeholder="Email Address" />
                         </div>
                         <div className="col">
                              <input type="submit" id="submit" onClick={handleSubmit} className="btn btn-primary" />
                              {
                                   loading ?

                                        <LineWave color={'#062DF6'} loading={loading} size={50} />
                                        :

                                        <Table tableData={tableData} />
                              }
                         </div>
                         <div className="app">

                         </div>

                    </div>
               </div>
          </div>
     );
}
export default Main;

my table.js

    function Table({ tableData }) {
    return (
        <div className="App">
            {
                <table className="table" id='table'>
                    <thead>
                        <tr>
                            <th>S.N</th>
                            <th>Full Name</th>
                            <th>Email Address</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            tableData.map((data, index) => {
                                return (
                                    <tr key={index}>
                                        <td>{index + 1}</td>
                                        <td>{data.Name}</td>
                                        <td>{data.email}</td>
                                    </tr>
                                )
                            })
                        }
                    </tbody>
                </table>
            }
        </div>
    )
}
export default Table;

Why are initially showing loader in useEffect?

Drashti Kheni
– Drashti Kheni

2022-09-02 06:33:22 +00:00
Commented Sep 2, 2022 at 6:33 — Drashti Kheni
– Drashti Kheni, Commented Sep 2, 2022 at 6:33

Drashti Kheni · Accepted Answer · 2022-09-02 06:46:33Z

3

Try once with following code

import React from "react";
import { LineWave } from "react-loader-spinner";
import { useState, useEffect } from "react";
import Table from "./Table";
function Main() {

     const [tableData, setTableData] = useState([])
     const [formInputData, setformInputData] = useState(
          {
               Name: '',
               email: '',
          }
     );
     const [loading, setloading] = useState(false);
   
     const handleChange = (evnt) => {
          const newInput = (data) => ({ ...data, [evnt.target.name]: evnt.target.value })
          setformInputData(newInput)
     }

     const handleSubmit = (evnt) => {
          setloading(true)
          evnt.preventDefault();
          const checkEmptyInput = !Object.values(formInputData).every(res => res === "")
          if (checkEmptyInput) {
               const newData = (data) => ([...data, formInputData])
               setTableData(newData);
               const emptyInput = { Name: '', email: '' }
               setformInputData(emptyInput)
      
          }
          setTimeout(() => {
               setloading(false)
          }, 4000)
     }

     return (
          <div className="container">
               <div className="row">
                    <div className="col-sm-8">
                         <div className="col">
                              <input type="text" onChange={handleChange} value={formInputData.Name} name="Name" className="form-control" placeholder="Name" />
                         </div>
                         <div className="col">
                              <input type="email" onChange={handleChange} value={formInputData.email} name="email" className="form-control" placeholder="Email Address" />
                         </div>
                         <div className="col">
                              <input type="submit" id="submit" onClick={handleSubmit} className="btn btn-primary" />
                              {
                                   loading ?

                                        <LineWave color={'#062DF6'} loading={loading} size={50} />
                                        :

                                        <Table tableData={tableData} />
                              }
                         </div>
                         <div className="app">

                         </div>

                    </div>
               </div>
          </div>
     );
}
export default Main;

edited Sep 2, 2022 at 6:46

answered Sep 2, 2022 at 6:36

Drashti Kheni

1,13910 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

badcoder01 Over a year ago

It works fine but doesn't show the spinner. it just shows the table

badcoder01 Over a year ago

thank you I just did the same, before seeing your updated code. it works perfectly.

Drashti Kheni Over a year ago

Note that you don't need to show any loader in your case as you are not submitting data to API. Loader is used only when you use any async/await function in your code.

Muhammad Raheel · Accepted Answer · 2022-09-02 06:37:45Z

0

Remove useEffect code and update handleSubmit with following code

       const handleSubmit = (evnt) => {
          evnt.preventDefault();
         setloading(true)
          const checkEmptyInput = !Object.values(formInputData).every(res => res === "")
          if (checkEmptyInput) {
               const newData = (data) => ([...data, formInputData])
               setTableData(newData);
               const emptyInput = { Name: '', email: '' }
               setformInputData(emptyInput)

          }
         setLoading(false)
     }

answered Sep 2, 2022 at 6:37

Muhammad Raheel

8982 gold badges9 silver badges18 bronze badges

Collectives™ on Stack Overflow

implement a load spinner when submitting a form in reactjs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related