How to show loading indicator for 5 seconds when I click the submit button in react?

Question

I am working on a React project. In that project I am trying to save user details on local

Storage. In this scenario after clicking submit button, I have to show the loader for showing

Loader I installed react-loader-spinner so someone please help me how to show loader for five

Seconds after clicking the submit button.

This is Users.js

import React, { Component } from 'react';
import './Users.css';
import { Container, Row, Col, Button } from 'reactstrap';
import UsersModal from '../../Components/UsersModal/UsersModal';
import Getusers from './Getusers/Getusers';

class Users extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isModal: false,
        }
    }

    toggleUserModal = () => {
        this.setState({
            isModal: true
        })
    }

    handleCloseModal = () => {
        this.setState({
            isModal: false
        })
    }



    render() {
        return (
            <Container>
                <Row>
                    <Col>
                        <div className='mt-3'>
                            <Button onClick={this.toggleUserModal} outline color="secondary">Create User</Button>
                            <UsersModal openModal={this.state.isModal} closeModal={this.handleCloseModal}></UsersModal>
                        </div>
                    </Col>
                </Row>
            </Container>
        )
    }
}

export default Users 

This is UsersModals.js

import React, { Component } from 'react';
import './UsersModal.css';
import {
    Button,
    Col,
    Modal,
    ModalBody,
    ModalFooter,
    ModalHeader,
    Row,
    FormGroup,
    Label,
    Input,
} from 'reactstrap';

class UsersModal extends Component {
    constructor(props) {
        super(props)
        this.state= {
            users: null
        }
}

 handleChange = ({target}) => {
        const { name, value } = target;
        const newData = Object.assign({}, this.state.users, {[name]:value});
        this.setState({
            users: newData
        })
    }

handleSubmit = (e) => {
        e.preventDefault()
        localStorage.setItem('data', JSON.stringify(this.state.users))
        this.props.closeModal()
    }


render() {
        return (
            <Row>
                <Col md="6" sm="6" xs="6">

                    <Modal isOpen={this.props.openModal}
                    >
                        <ModalHeader >Create User</ModalHeader>
                        <ModalBody>
                            <FormGroup>
                                <Label for="exampleName">Name</Label>
                                <Input
                                    type='text'
                                    name='name'
                                    placeholder='Enter Your name'
                                    onChange={this.handleChange}
                                />

                            </FormGroup>
                            <FormGroup>
                                <Label for="exampleEmail">Email</Label>
                                <Input
                                    type='email'
                                    name='email'
                                    placeholder="Enter Your email"
                                    onChange={this.handleChange}
                                />
                            </FormGroup>
                        </ModalBody>
                        <ModalFooter>
                            <Button onClick={this.props.closeModal} color="secondary">
                                Cancel
                </Button>
                            <Button onClick={this.handleSubmit} type="submit" color="primary">
                                Submit
                </Button>
                        </ModalFooter>
                    </Modal>
                </Col>
            </Row>
        )
    }
}

export default UsersModal

Answer 1

I assume you'd like to show the loader inside the modal, above the form or near it..

Put the Loader component from the react-loader-spinner library where you'd like it to show, add a showLoader flag to your modal component's state and render the component in condition of the flag. Do not use the library's timeout prop.

{this.state.showLoader && (
  <Loader props />
)}

On your submit handler, set the flag to true to toggle the loader, and use a setTimeout to close it.

handleSubmit = e => {
  e.preventDefault();
  localStorage.setItem("data", JSON.stringify(this.state.users));
  this.setState({
    showLoader: true
  });
  this.closeLoaderIn5Seconds();
};

closeLoaderIn5Seconds = () => 
  setTimeout(() => {
    this.props.closeModal();
    this.setState({
      showLoader: false
    });
  }, 5000);
};

Depending on where you'd like to show the loader you may have to move the code..

I'd put the isModal flag to the child component to remove the little bug where the modal is closed after the loader..

Anyway here's a codesandbox.