Attempt at adding Progress bar for loading

App.js

/**
 * App.js
 * parent component of app
 */

/* global $ */ // spec jquery global
/* boilerplate */
import React, {Component, PropTypes} from 'react';
import {connect} from 'react-redux';
import {routeActions} from 'react-router-redux';
import Helmet from 'react-helmet';
/* helpers */
import config from '../../config';
/* reducers */
/* render components */
import {Menu} from 'containers';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Progress from 'react-progress-2';
/* styles */
import './app.css';
import 'react-progress-2/main.css';

@connect(
  state => ({
    user: state.auth.user,
    location: state.routing.location,
    isAsyncDataLoaded: state.reduxAsyncConnect.loaded
  }),
  {pushState: routeActions.push}
)
export default class App extends Component {
  static propTypes = {
    /* states */
    children: PropTypes.object.isRequired,
    // user: PropTypes.object,
    location: PropTypes.object.isRequired,
    isAsyncDataLoaded: PropTypes.bool.isRequired,
    /* actions */
    // logout: PropTypes.func.isRequired,
    pushState: PropTypes.func.isRequired
  };

  static contextTypes = {
    store: PropTypes.object.isRequired
  };

  componentWillReceiveProps() {
    // hide progress bar if active and async data loaded
    console.log(this.props.isAsyncDataLoaded);
    this.props.isAsyncDataLoaded ? Progress.hide() : Progress.show();
  }

  render() {
    // pleasure theme. NOTE: required here because it contains references to `window`
    require('theme');

    return (
      <div>
        {/* meta data */}
        <Helmet {...config.app.head}/>

        <Menu />

        {/* animation transition on route change */}
        <div className="content">
          <Progress.Component />
          {React.cloneElement(this.props.children)}
        </div>
      </div>
    );
  }
}