From 8c374773e69213782a36ad4a2b1683c29b4c17ed Mon Sep 17 00:00:00 2001
From: Gabriel Rodriguez Alsina <gabriel.rodriguez@altoros.com>
Date: Fri, 14 Dec 2018 09:15:59 -0300
Subject: [PATCH] (add) base loader to show until we have the network id and
 the right colors can be used for the dapp

---
 src/App.js                                        |  11 ++++++-----
 .../stylesheets/components/_BaseLoader.scss       |  13 +++++++++++++
 src/assets/stylesheets/components/_index.scss     |   1 +
 src/assets/stylesheets/index.css                  |  13 +++++++++++++
 src/components/BaseLoader/index.js                |  10 ++++++++++
 src/components/BaseLoader/loading.gif             | Bin 0 -> 673 bytes
 6 files changed, 43 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/stylesheets/components/_BaseLoader.scss
 create mode 100644 src/components/BaseLoader/index.js
 create mode 100644 src/components/BaseLoader/loading.gif

diff --git a/src/App.js b/src/App.js
index bbe1215..041471c 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import addressGenerator from './utils/addressGenerator'
 import getWeb3 from './utils/getWeb3'
 import networkAddresses from './utils/addresses'
 import swal from 'sweetalert'
+import { BaseLoader } from './components/BaseLoader'
 import { Footer } from './components/Footer'
 import { Header } from './components/Header'
 import { Home } from './components/Home'
@@ -201,11 +202,9 @@ class App extends Component {
   }
 
   render() {
-    const loader = this.state.loading ? <Loading networkBranch={this.state.networkBranch} /> : null
-
-    return (
+    return this.state.networkBranch ? (
       <div className="lo-App">
-        {loader}
+        {this.state.loading ? <Loading networkBranch={this.state.networkBranch} /> : null}
         <Header networkBranch={this.state.networkBranch} />
         <section className="lo-App_Content">
           {this.state.keysGenerated ? (
@@ -216,11 +215,13 @@ class App extends Component {
               voting={this.state.voting}
             />
           ) : (
-            <Home onClick={this.onClick} disabled={this.state.isDisabledBtn} networkBranch={this.state.networkBranch} />
+            <Home disabled={this.state.isDisabledBtn} networkBranch={this.state.networkBranch} onClick={this.onClick} />
           )}
         </section>
         <Footer networkBranch={this.state.networkBranch} />
       </div>
+    ) : (
+      <BaseLoader />
     )
   }
 }
diff --git a/src/assets/stylesheets/components/_BaseLoader.scss b/src/assets/stylesheets/components/_BaseLoader.scss
new file mode 100644
index 0000000..15ee6c9
--- /dev/null
+++ b/src/assets/stylesheets/components/_BaseLoader.scss
@@ -0,0 +1,13 @@
+.ld-BaseLoader {
+    align-items: center;
+    background-color: rgba(#fff, 0.8);
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    z-index: 1000000;
+}
\ No newline at end of file
diff --git a/src/assets/stylesheets/components/_index.scss b/src/assets/stylesheets/components/_index.scss
index fee8664..a2e0d44 100644
--- a/src/assets/stylesheets/components/_index.scss
+++ b/src/assets/stylesheets/components/_index.scss
@@ -1,4 +1,5 @@
 @import "App";
+@import "BaseLoader";
 @import "ButtonDownload";
 @import "ButtonGenerate";
 @import "Footer";
diff --git a/src/assets/stylesheets/index.css b/src/assets/stylesheets/index.css
index 15c7d1b..6c78910 100644
--- a/src/assets/stylesheets/index.css
+++ b/src/assets/stylesheets/index.css
@@ -602,6 +602,19 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
       padding-left: 20px;
       padding-right: 20px; } }
 
+.ld-BaseLoader {
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.8);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 1000000; }
+
 .sw-ButtonDownload {
   align-items: center;
   background-color: #5a2da5;
diff --git a/src/components/BaseLoader/index.js b/src/components/BaseLoader/index.js
new file mode 100644
index 0000000..c9ebcd3
--- /dev/null
+++ b/src/components/BaseLoader/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import loadingImg from './loading.gif'
+
+export const BaseLoader = () => {
+  return (
+    <div className={`ld-BaseLoader`}>
+      <img className={`ld-BaseLoader_Image`} src={loadingImg} alt="" />
+    </div>
+  )
+}
diff --git a/src/components/BaseLoader/loading.gif b/src/components/BaseLoader/loading.gif
new file mode 100644
index 0000000000000000000000000000000000000000..d0bce1542342e912da81a2c260562df172f30d73
GIT binary patch
literal 673
zcmZ?wbhEHb6krfw_{6~Q|Nnmm28Kh24mmkF0U1e2Nli^nlO|14{Lk&@8WQa67~pE8
zXTZz|lvDgC<y@4SSdyBeP@Y+mp^%uBSdo*Tn4*`NmzK|<_>+Z`3#dv5h=E26FfcG1
zbL_hF&)}42ws10s6^G;;cE1^EoUR)U5A70}d2pLv!jVIT7j&Z~EblI3x0K*v_sV|m
z0kj3v921Z^em#l`(k(o@H$3ZdDRc@9NidXDNbqrumReCGv$gd8+e8WW28HVqkJ_9i
zH>s*<31KtHjANIPvi2#*6BEu%3Dak5O_t&NBI)<h(<yPr>H?V$TxT}#l{vOTn<?_G
z_#ejR!~8}oQ>5naXTfF^&~Hhq+NX@#Ccc>y7T?;vjI&jdhsDsPJyAw*m0Qz>i}K7#
zL9w50<qa%!r20=RDYEpz>Ng{fT}A5JUe8lRK1h7_Y2;BWJDd=c6f&i?Wv5(5q?6|P
zQw{>maxZP<537OA37Uk}7@%_$4o$EWe_Zl>&#id|lE-BpDC#+Fn|msJ%_2h{Hg1vP
z#N8WAzfWasG}yq|xqE)DrWaOofX=z|?*pgc%{ig5vl!pqDlC|q&~Z0$&Rvsft&VO-
z4MZj+%-+Vx%W}v;V76hyp=;+R;x+~t^Q%*xuFTQAF2})fSfTHDAs>sO!OBw`)&)o$
c0!CNZt))x~rAZP^^P&YOFfdqy5)K#u0POD40{{R3

literal 0
HcmV?d00001