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 ? : null - - return ( + return this.state.networkBranch ? (
- {loader} + {this.state.loading ? : null}
{this.state.keysGenerated ? ( @@ -216,11 +215,13 @@ class App extends Component { voting={this.state.voting} /> ) : ( - + )}
+ ) : ( + ) } } 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 ( +
+ +
+ ) +} diff --git a/src/components/BaseLoader/loading.gif b/src/components/BaseLoader/loading.gif new file mode 100644 index 0000000..d0bce15 Binary files /dev/null and b/src/components/BaseLoader/loading.gif differ