Loading screen for react apps. If javascript is disabled and static page is being served, loader will not be displayed

reactLoadingScreen.js

import React from 'react';


const {PropTypes} = React;

const loaderStyles = {
  position: 'fixed',
  top: 0,
  left: 0,
  width: '100%',
  height: '100%',
  zIndex: 10,
  backgroundColor: '#fff',
  transition: 'opacity 1s',
  WebkitTransition: 'opacity 1s',
  OTransition: 'opacity 1s',
};
export default class LoadingScreen extends React.Component {

  static propTypes = {
    transitionTime: PropTypes.number,
    style: PropTypes.object,
    children: PropTypes.node,
  };

  componentDidMount = () => {
    let timing = this.props.transitionTime || 1000;
    setTimeout(() => {
      this.loader.style.opacity = 0;
      setTimeout(() => {
        this.loader.style.display = 'none';
      }, timing);  // transition time
    }, 0);  // allow the loader to be rendered first with 1 opacity
  };

  render = () => {

    const styles = {
      ...loaderStyles,
      ...this.props.style,
    };

    const noScriptHTML = {
      __html: '<style> #loader { display: none !important; } </style>',  // don't hide the page if javascript is disabled
    };

    return (
      <div
        id="loader"
        style={styles}
        ref={(c) => this.loader = c}
      >
        <noscript
          dangerouslySetInnerHTML={(() => noScriptHTML)()}
        >
        </noscript>
        {this.props.children}
      </div>
    );
  };
}