diff options
author | Alexander Tseung <alextsg@gmail.com> | 2017-10-20 12:06:14 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2017-10-20 12:06:14 +0800 |
commit | 5a93ec02523e8b54222cc44cba5b80dcf8f07a7a (patch) | |
tree | fc15a146111c5081fcfe8787fb12b8b66f5a2ee9 /ui/app/components/loading.js | |
parent | 79be956be9f5297d6d601941e50d5ae4eca58560 (diff) | |
download | tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.tar tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.tar.gz tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.tar.bz2 tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.tar.lz tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.tar.xz tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.tar.zst tangerine-wallet-browser-5a93ec02523e8b54222cc44cba5b80dcf8f07a7a.zip |
Fix loading animation not showing on network change
Diffstat (limited to 'ui/app/components/loading.js')
-rw-r--r-- | ui/app/components/loading.js | 75 |
1 files changed, 34 insertions, 41 deletions
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js index 163792584..e6d841aa0 100644 --- a/ui/app/components/loading.js +++ b/ui/app/components/loading.js @@ -1,45 +1,38 @@ -const inherits = require('util').inherits -const Component = require('react').Component +const { Component } = require('react') const h = require('react-hyperscript') - -inherits(LoadingIndicator, Component) -module.exports = LoadingIndicator - -function LoadingIndicator () { - Component.call(this) -} - -LoadingIndicator.prototype.render = function () { - const { isLoading, loadingMessage } = this.props - - return ( - isLoading ? h('.full-flex-height', { - style: { - left: '0px', - 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 - ) +class LoadingIndicator extends Component { + renderMessage () { + const { loadingMessage } = this.props + return loadingMessage && h('span', loadingMessage) + } + + render () { + return ( + h('.full-flex-height', { + style: { + left: '0px', + zIndex: 50, + 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'), + + this.renderMessage(), + ]) + ) + } } -function showMessageIfAny (loadingMessage) { - if (!loadingMessage) return null - return h('span', loadingMessage) -} +module.exports = LoadingIndicator |