src/utils/SpinnerContainer.jsx

   1 import React, { Component } from 'react';
   2 import { ClipLoader } from 'react-spinners';
   3 import {COLOR_BLUE} from 'utils/GlobalConstants.js';
   4
   5 class SpinnerContainer extends Component {
   6   render() {
   7     // if loading, show content as busy (ex: grey out)
   8     const spinnerContentClass = this.props.loading ? 'spinner-content' : '';
   9     return (
  10       <div className='spinner-container'>
  11         <div className='spinner'>
  12           <ClipLoader color={COLOR_BLUE} loading={this.props.loading} />
  13         </div>
  14         <div className={spinnerContentClass}>
  15           {this.props.children}
  16         </div>
  17       </div>
  18     );
  19   }
  20 }
  21 export default SpinnerContainer;
  22
  23 SpinnerContainer.propTypes = {
  24   loading: React.PropTypes.bool
  25 };
  26
  27 SpinnerContainer.defaultProps = {
  28   loading: false
  29 };
  30