ReactJS: adding spinner/progress bar to the page - node.js

Question

I have no luck with adding spinner/progress bar to the page.
Tried many different libraries , without no success.
I need it to show on
//SHOW SPINNER
and then hide on
//HIDE SPINNER
line in the bellow code
Any help appreciated.
import React, { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { deleteUser } from '../actions/Actions';
import { updateUser as APIUpdateUser, addUser as APIAddUser } from '../utils/APIUtils';
import language from '../language';
import scrollToElement from 'scroll-to-element';
import CarsSelect from './CarsSelect';
var _ = require('lodash');
function mapStateToProps(state) {
return {
};
}
class UserTableRow extends Component {
static propTypes = {
data: PropTypes.object.isRequired,
number: PropTypes.number.isRequired,
}
static contextTypes = {
store: React.PropTypes.object
}
constructor(props) {
console.log("Progress");
super(props);
this.state = {
edit: false,
data: props.data
};
this._handleChange = this._handleChange.bind(this);
this._handleCarChange = this._handleCarChange.bind(this);
this._startEdit = this._startEdit.bind(this);
this._cancelEdit = this._cancelEdit.bind(this);
this._handleSave = this._handleSave.bind(this);
this._handleShow = this._handleShow.bind(this);
}
componentDidMount() {
const {data} = this.props;
if (typeof data.new !== 'undefined' && data.new === true) {
this.setState({
edit: true
});
scrollToElement(this.refs.row, {
offset: 0,
ease: 'out-bounce',
duration: 1000
});
}
}
componentWillReceiveProps(nextProps) {
this.setState({
data: nextProps.data,
});
}
render() {
const {number} = this.props;
const {data} = this.state;
const lang = language[language.default];
var showClass = 'more';
var rowHidden = 'hidden';
if (this.state.more === true) {
showClass = 'less';
rowHidden = 'visible';
}
var editClass = '';
if (this.state.edit === true) {
editClass = 'table__row--edit';
}
return (
<div>
<div ref='row' className={'table__row table__row--outer ' + editClass}>
<div className='table__elements-wrapper'>
<div className='table__element'>{number}</div>
<div className='table__element'>
<span className='table__editable-data'>{data.email}</span>
<input onChange={this._handleChange.bind(this, 'email')} className='table__editable-hidden' ref='email' name='email' type='email' value={data.email} />
</div>
<div className='table__element'>
<span className='table__editable-data'>{data.firstName}</span>
<input onChange={this._handleChange.bind(this, 'firstName')} className='table__editable-hidden' ref='firstName' name='firstName' type='text' value={data.firstName} />
</div>
<div className='table__element'>
<span className='table__editable-data'>{data.lastName}</span>
<input onChange={this._handleChange.bind(this, 'lastName')} className='table__editable-hidden' ref='lastName' name='lastName' type='text' value={data.lastName} />
</div>
<div className='table__element'>
<span className='table__editable-data'>{data.phone}</span>
<input onChange={this._handleChange.bind(this, 'phone')} className='table__editable-hidden' ref='phone' name='phone' type='text' value={data.phone} />
</div>
<div className='table__element'>
<span className='table__editable-data'>{lang.userArr[data.type]}</span>
<select onChange={this._handleChange.bind(this, 'type')} className='table__editable-hidden' ref='type' name='type' type='text' value={data.type}>
<option value='0'>{lang.userArr[0]}</option>
<option value='1'>{lang.userArr[1]}</option>
<option value='2'>{lang.userArr[2]}</option>
</select>
</div>
<div className='table__element'>
<input className='table__editable-hidden' ref='password' name='password' type='password' />
</div>
<div className='table__element table__element--avatar'>
<img lightbox='lightbox' className='table__editable-data' src={data.image} alt=''/>
<input className='table__editable-hidden' type='file' ref='image' name='image' />
</div>
<div className='table__element'>
{(() => {
if (data.superAdmin !== true) {
return <div className='table__buttons'>
<div onClick={this._startEdit} className='table__button table__button--edit'></div>
<div onClick={this._cancelEdit} className='table__button table__button--cancel '></div>
<div onClick={this._handleSave} className='table__button table__button--ok'></div>
</div>;
} else {
return false;
}
})()}
</div>
<div className='table__element'><div onClick={this._handleShow} className={'table__show table__show--' + showClass}></div></div>
</div>
<div ref='hiddenRow' className={'table__row table__row--inner table__row--' + rowHidden}></div>
</div>
</div>
);
}
_handleShow() {
var more = this.state.more;
if (!more) {
ReactDOM.render(<CarsSelect handleCarChange={this._handleCarChange} user={this.state.data} />, this.refs.hiddenRow);
} else {
ReactDOM.unmountComponentAtNode(this.refs.hiddenRow);
}
this.setState({
more: !more
});
}
_handleCarChange(e) {
var {data} = this.state;
var values = [];
var userValues = [];
_.each(e, function(item) {
values.push({nameplate: item.label, _id: item.value});
userValues.push(item.value);
});
data.cars = values;
this.setState({
data: data
});
var user = {};
user._id = data._id;
user.cars = userValues;
APIUpdateUser(user);
}
_handleChange(type, event) {
var data = this.state.data;
data[type] = event.target.value;
this.setState({
data: data
});
}
_startEdit() {
this.setState({
edit: true
});
}
_cancelEdit() {
const {data} = this.props;
if (data.new === true) {
this.context.store.dispatch(deleteUser(data));
}
this.setState({
edit: false
});
}
_handleSave() {
//SHOW SPINNER
const {data} = this.props;
var user = {};
user._id = data._id;
user.email = this.refs.email.value;
user.firstName = this.refs.firstName.value;
user.lastName = this.refs.lastName.value;
user.phone = this.refs.phone.value;
user.type = this.refs.type.value;
if (this.refs.password.value) {
user.password = this.refs.password.value;
}
if (this.refs.image.files[0]) {
var reader = new window.FileReader();
reader.readAsDataURL(this.refs.image.files[0]);
reader.onloadend = function() {
user.image = reader.result;
console.log(user.image);
if (data.new === true) {
this.context.store.dispatch(deleteUser(data));
APIAddUser(user);
} else {
APIUpdateUser(user);
}
};
} else {
if (data.new === true) {
this.context.store.dispatch(deleteUser(data));
APIAddUser(user);
} else {
APIUpdateUser(user);
}
}
this.setState({
edit: false
});
//HIDE SPINNER
}
}
var getOptions = function(input, callback) {
setTimeout(function() {
callback(null, {
options: [
{value: 'one', label: 'One'},
{value: 'two', label: 'Two'}
],
// CAREFUL! Only set this to true when there are no more options,
// or more specific queries will not be sent to the server.
complete: true
});
}, 500);
};
export default connect(mapStateToProps)(UserTableRow);

Answer 1

Install
$ npm install react-spinkit --save
Usage
import Spinner from 'react-spinkit';
<Spinner spinnerName='double-bounce' />
see more here https://github.com/KyleAMathews/react-spinkit