diff options
Diffstat (limited to 'ui/app/components/loading.js')
-rw-r--r-- | ui/app/components/loading.js | 60 |
1 files changed, 20 insertions, 40 deletions
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index 88dc535df..cb6fa51fb 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -1,50 +1,30 @@ -const inherits = require('util').inherits -const Component = require('react').Component +const { Component } = require('react') const h = require('react-hyperscript') -const ReactCSSTransitionGroup = require('react-addons-css-transition-group') +const PropTypes = require('prop-types') +class LoadingIndicator extends Component { + renderMessage () { + const { loadingMessage } = this.props + return loadingMessage && h('span', loadingMessage) + } -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', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - height: '100%', - width: '100%', - background: 'rgba(255, 255, 255, 0.5)', - }, - }, [ + render () { + return ( + h('.full-flex-height.loading-overlay', {}, [ h('img', { src: 'images/loading.svg', }), - showMessageIfAny(loadingMessage), - ]) : null, - ]) - ) + h('br'), + + this.renderMessage(), + ]) + ) + } } -function showMessageIfAny (loadingMessage) { - if (!loadingMessage) return null - return h('span', loadingMessage) +LoadingIndicator.propTypes = { + loadingMessage: PropTypes.string, } + +module.exports = LoadingIndicator |