metamask-extension/ui/app/components/loading.js

const inherits = require('util').inherits
const Component = require('react').Component
const h = require('react-hyperscript')
const ReactCSSTransitionGroup = require('react-addons-css-transition-group')


inherits(LoadingIndicator, Component)
module.exports = LoadingIndicator

function LoadingIndicator () {
  Component.call(this)
}

LoadingIndicator.prototype.render = function () {
  const { isLoading, loadingMessage } = this.props

  return (
    h(ReactCSSTransitionGroup, {
      className: 'css-transition-group',
      transitionName: 'loader',
      transitionEnterTimeout: 150,
      transitionLeaveTimeout: 150,
    }, [

      isLoading ? h('div', {
        style: {
          zIndex: 10,
          position: 'absolute',
          flexDirection: 'column',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100%',
          width: '100%',
          background: 'rgba(255, 255, 255, 0.8)',
        },
      }, [
        h('img', {
          src: 'images/loading.svg',
        }),

        h('br'),

        showMessageIfAny(loadingMessage),
      ]) : null,
    ])
  )
}

function showMessageIfAny (loadingMessage) {
  if (!loadingMessage) return null
  return h('span', loadingMessage)
}