Reuse the loading-screen component and colocate it's styles (#9177)

ui/app/components/app/loading-network-screen/loading-network-screen.component.js

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import Spinner from '../../ui/spinner'
 import Button from '../../ui/button'
+import LoadingScreen from '../../ui/loading-screen'
 
 export default class LoadingNetworkScreen extends PureComponent {
   state = {
@@ -56,19 +56,6 @@ export default class LoadingNetworkScreen extends PureComponent {
     return name
   }
 
-  renderMessage = () => {
-    return <span>{ this.getConnectingLabel(this.props.loadingMessage) }</span>
-  }
-
-  renderLoadingScreenContent = () => {
-    return (
-      <div className="loading-overlay__screen-content">
-        <Spinner color="#F7C06C" />
-        {this.renderMessage()}
-      </div>
-    )
-  }
-
   renderErrorScreenContent = () => {
     const { showNetworkDropdown, setProviderArgs, setProviderType } = this.props
 
@@ -129,18 +116,16 @@ export default class LoadingNetworkScreen extends PureComponent {
     const { lastSelectedProvider, setProviderType } = this.props
 
     return (
-      <div className="loading-overlay">
+      <LoadingScreen
-        <div
+        header={(
-          className="page-container__header-close"
+          <div
-          onClick={() => setProviderType(lastSelectedProvider || 'ropsten')}
+            className="page-container__header-close"
-        />
+            onClick={() => setProviderType(lastSelectedProvider || 'ropsten')}
-        <div className="loading-overlay__container">
+          />
-          { this.state.showErrorScreen
+        )}
-            ? this.renderErrorScreenContent()
+        showLoadingSpinner={!this.state.showErrorScreen}
-            : this.renderLoadingScreenContent()
+        loadingMessage={this.state.showErrorScreen ? this.renderErrorScreenContent() : this.getConnectingLabel(this.props.loadingMessage)}
-          }
+      />
-        </div>
-      </div>
     )
   }
 }

ui/app/components/ui/loading-screen/index.scss

@@ -53,9 +53,9 @@
   &__emoji {
     font-size: 32px;
   }
-}
 
-.spinner {
+  &__spinner {
-  height: 58px;
+    height: 58px;
-  width: 58px;
+    width: 58px;
+  }
 }

ui/app/components/ui/loading-screen/loading-screen.component.js

@@ -1,18 +1,24 @@
-import React, { Component } from 'react'
+import React, { Component, isValidElement } from 'react'
 import PropTypes from 'prop-types'
 import Spinner from '../spinner'
 
 class LoadingScreen extends Component {
   static defaultProps = {
     loadingMessage: null,
+    showLoadingSpinner: true,
   }
 
   static propTypes = {
-    loadingMessage: PropTypes.string,
+    loadingMessage: PropTypes.oneOf([PropTypes.string, PropTypes.element]),
+    showLoadingSpinner: PropTypes.bool,
+    header: PropTypes.element,
   }
 
   renderMessage () {
     const { loadingMessage } = this.props
+    if (isValidElement(loadingMessage)) {
+      return loadingMessage
+    }
     return loadingMessage
       ? <span>{loadingMessage}</span>
       : null
@@ -21,8 +27,9 @@ class LoadingScreen extends Component {
   render () {
     return (
       <div className="loading-overlay">
+        {this.props.header && this.props.header}
         <div className="loading-overlay__container">
-          <Spinner color="#F7C06C" />
+          {this.props.showLoadingSpinner && <Spinner color="#F7C06C" className="loading-overlay__spinner" />}
           {this.renderMessage()}
         </div>
       </div>

ui/app/components/ui/ui-components.scss

@@ -23,6 +23,7 @@
 @import 'identicon/index';
 @import 'info-tooltip/index';
 @import 'list-item/index';
+@import 'loading-screen/index';
 @import 'menu/menu';
 @import 'page-container/index';
 @import 'popover/index';

ui/app/css/itcss/components/index.scss

@@ -2,7 +2,6 @@
 @import './network';
 @import './newui-sections';
 @import './send';
-@import './loading-overlay';
 
 // Tx List and Sections
 @import './gas-slider';