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;

Answer 1

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;

Answer 2

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