From 1ed5804e4dd2f85549abcb8dfd8981dab3f6868c Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 14 Jun 2017 19:15:50 -0700
Subject: [PATCH] Multiple loading style improvements

- When seeking network, show a full screen loading indication + message.
- Network menu is still accessible "over" this indication.
- Top Menu-Droppo components now slide *under* the menu bar like they should.
- Loading indication opacity increased to increase message legibility.
---
 ui/app/app.js                | 19 ++++++++++++-------
 ui/app/components/loading.js |  5 ++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/ui/app/app.js b/ui/app/app.js
index 53dbc3354..17a0f8ef3 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -21,7 +21,7 @@ const generateLostAccountsNotice = require('../lib/lost-accounts-notice')
 const ConfigScreen = require('./config')
 const Import = require('./accounts/import')
 const InfoScreen = require('./info')
-const LoadingIndicator = require('./components/loading')
+const Loading = require('./components/loading')
 const SandwichExpando = require('sandwich-expando')
 const MenuDroppo = require('menu-droppo')
 const DropMenuItem = require('./components/drop-menu-item')
@@ -64,7 +64,9 @@ function mapStateToProps (state) {
 
 App.prototype.render = function () {
   var props = this.props
-  const { isLoading, loadingMessage, transForward } = props
+  const { isLoading, loadingMessage, transForward, network } = props
+  const isLoadingNetwork = network === 'loading'
+
   log.debug('Main ui render function')
 
   return (
@@ -77,13 +79,16 @@ App.prototype.render = function () {
       },
     }, [
 
-      h(LoadingIndicator, { isLoading, loadingMessage }),
-
       // app bar
       this.renderAppBar(),
       this.renderNetworkDropdown(),
       this.renderDropdown(),
 
+      h(Loading, {
+        isLoading: isLoading || isLoadingNetwork,
+        loadingMessage: loadingMessage || 'Searching for Network',
+      }),
+
       // panel content
       h('.app-primary.flex-grow' + (transForward ? '.from-right' : '.from-left'), {
         style: {
@@ -124,7 +129,7 @@ App.prototype.renderAppBar = function () {
           background: props.isUnlocked ? 'white' : 'none',
           height: '36px',
           position: 'relative',
-          zIndex: 10,
+          zIndex: 12,
         },
       }, [
 
@@ -221,7 +226,7 @@ App.prototype.renderNetworkDropdown = function () {
     onClickOutside: (event) => {
       this.setState({ isNetworkMenuOpen: !isOpen })
     },
-    zIndex: 1,
+    zIndex: 11,
     style: {
       position: 'absolute',
       left: 0,
@@ -300,7 +305,7 @@ App.prototype.renderDropdown = function () {
 
   return h(MenuDroppo, {
     isOpen: isOpen,
-    zIndex: 1,
+    zIndex: 11,
     onClickOutside: (event) => {
       this.setState({ isMainMenuOpen: !isOpen })
     },
diff --git a/ui/app/components/loading.js b/ui/app/components/loading.js
index 88dc535df..87d6f5d20 100644
--- a/ui/app/components/loading.js
+++ b/ui/app/components/loading.js
@@ -26,18 +26,21 @@ LoadingIndicator.prototype.render = function () {
         style: {
           zIndex: 10,
           position: 'absolute',
+          flexDirection: 'column',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           height: '100%',
           width: '100%',
-          background: 'rgba(255, 255, 255, 0.5)',
+          background: 'rgba(255, 255, 255, 0.8)',
         },
       }, [
         h('img', {
           src: 'images/loading.svg',
         }),
 
+        h('br'),
+
         showMessageIfAny(loadingMessage),
       ]) : null,
     ])