(add) base loader to show until we have the network id and the right colors can be used for the dapp
This commit is contained in:
parent
d0b7ca0c55
commit
8c374773e6
11
src/App.js
11
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 />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
@import "App";
|
||||
@import "BaseLoader";
|
||||
@import "ButtonDownload";
|
||||
@import "ButtonGenerate";
|
||||
@import "Footer";
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
}
|
Binary file not shown.
After Width: | Height: | Size: 673 B |
Loading…
Reference in New Issue