1 import React, { Component } from 'react';

     2 import PropTypes from 'prop-types';

     3 

     4 import { connect } from 'react-redux';

     5 

     6 import Nanobar from 'nanobar';

     7 

     8 import './Loader.scss';

     9 

    10 export class LoaderComponent extends Component {

    11   componentDidMount() {

    12     const opt = {

    13       id: 'bar-main',

    14       target: document.getElementById('nanobar'),

    15     };

    16 

    17     this.nanobar = new Nanobar(opt);

    18 

    19     // this.nanobar.go(10);

    20   }

    21 

    22   componentDidUpdate() {

    23     const { go } = this.props;

    24     this.nanobar.go(go);

    25   }

    26 

    27   render() {

    28     return <div id="nanobar" />;

    29   }

    30 }

    31 

    32 

    33 LoaderComponent.propTypes = {

    34   go: PropTypes.number.isRequired,

    35 };

    36 

    37 export default connect(

    38   (state) => {

    39     switch (state.annotations.isFetching) {

    40       case true:

    41         return { go: 50 };

    42 

    43       case false:

    44         return { go: 100 };

    45       default:

    46         return {};

    47     }

    48   },

    49 )(LoaderComponent);