(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 getWeb3 from './utils/getWeb3'
|
||||||
import networkAddresses from './utils/addresses'
|
import networkAddresses from './utils/addresses'
|
||||||
import swal from 'sweetalert'
|
import swal from 'sweetalert'
|
||||||
|
import { BaseLoader } from './components/BaseLoader'
|
||||||
import { Footer } from './components/Footer'
|
import { Footer } from './components/Footer'
|
||||||
import { Header } from './components/Header'
|
import { Header } from './components/Header'
|
||||||
import { Home } from './components/Home'
|
import { Home } from './components/Home'
|
||||||
|
@ -201,11 +202,9 @@ class App extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const loader = this.state.loading ? <Loading networkBranch={this.state.networkBranch} /> : null
|
return this.state.networkBranch ? (
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="lo-App">
|
<div className="lo-App">
|
||||||
{loader}
|
{this.state.loading ? <Loading networkBranch={this.state.networkBranch} /> : null}
|
||||||
<Header networkBranch={this.state.networkBranch} />
|
<Header networkBranch={this.state.networkBranch} />
|
||||||
<section className="lo-App_Content">
|
<section className="lo-App_Content">
|
||||||
{this.state.keysGenerated ? (
|
{this.state.keysGenerated ? (
|
||||||
|
@ -216,11 +215,13 @@ class App extends Component {
|
||||||
voting={this.state.voting}
|
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>
|
</section>
|
||||||
<Footer networkBranch={this.state.networkBranch} />
|
<Footer networkBranch={this.state.networkBranch} />
|
||||||
</div>
|
</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 "App";
|
||||||
|
@import "BaseLoader";
|
||||||
@import "ButtonDownload";
|
@import "ButtonDownload";
|
||||||
@import "ButtonGenerate";
|
@import "ButtonGenerate";
|
||||||
@import "Footer";
|
@import "Footer";
|
||||||
|
|
|
@ -602,6 +602,19 @@ body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
padding-right: 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 {
|
.sw-ButtonDownload {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: #5a2da5;
|
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