(add) base loader to show until we have the network id and the right colors can be used for the dapp

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 />
     )
   }
 }

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;
+}

src/assets/stylesheets/components/_index.scss

@@ -1,4 +1,5 @@
 @import "App";
+@import "BaseLoader";
 @import "ButtonDownload";
 @import "ButtonGenerate";
 @import "Footer";

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;

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>
+  )
+}