Reputation: 615
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
Upvotes: 1
Views: 6382
Reputation: 889
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.
Upvotes: 3