diff --git a/app/components/loading-screen.js b/app/components/loading-screen.js index 2bd3c5a..fbedd2e 100644 --- a/app/components/loading-screen.js +++ b/app/components/loading-screen.js @@ -2,19 +2,51 @@ import React from 'react'; import styled from 'styled-components'; +import CircleProgressComponent from 'react-circle'; import { TextComponent } from './text'; +import zcashLogo from '../assets/images/zcash-simple-icon.svg'; + +import theme from '../theme'; + const Wrapper = styled.div` width: 100vw; height: 100vh; display: flex; + flex-direction: column; align-items: center; justify-content: center; - background-color: ${props => props.theme.colors.background}; + background-color: ${props => props.theme.colors.cardBackgroundColor}; `; -export const LoadingScreen = () => ( +const CircleWrapper = styled.div` + width: 125px; + height: 125px; + position: relative; + margin-bottom: 25px; +`; + +const Logo = styled.img` + z-index: 10; + position: absolute; + width: 50px; + height: 50px; + top: calc(50% - 25px); + left: calc(50% - 25px); +`; + +export const LoadingScreen = ({ progress }: { progress: number }) => ( - + + + + + ); diff --git a/app/components/with-daemon-status-check.js b/app/components/with-daemon-status-check.js index 16c517b..124b97f 100644 --- a/app/components/with-daemon-status-check.js +++ b/app/components/with-daemon-status-check.js @@ -5,12 +5,13 @@ import { LoadingScreen } from './loading-screen'; import rpc from '../../services/api'; +type Props = {}; + type State = { isRunning: boolean, + progress: number, }; -type Props = {}; - /* eslint-disable max-len */ export const withDaemonStatusCheck = ( WrappedComponent: ComponentType, @@ -19,6 +20,7 @@ export const withDaemonStatusCheck = ( state = { isRunning: false, + progress: 0, }; componentDidMount() { @@ -35,24 +37,36 @@ export const withDaemonStatusCheck = ( } runTest = () => { - rpc.getinfo().then((response) => { - if (response) { - this.setState(() => ({ isRunning: true })); - if (this.timer) { - clearInterval(this.timer); - this.timer = null; + rpc + .getinfo() + .then((response) => { + if (response) { + setTimeout(() => { + this.setState(() => ({ isRunning: true })); + }, 500); + this.setState(() => ({ progress: 100 })); + + if (this.timer) { + clearInterval(this.timer); + this.timer = null; + } } - } - }); + }) + .catch(() => { + this.setState((state) => { + const newProgress = state.progress > 70 ? state.progress + 2.5 : state.progress + 5; + return { progress: newProgress > 95 ? 95 : newProgress }; + }); + }); }; render() { - const { isRunning } = this.state; + const { isRunning, progress } = this.state; if (isRunning) { return ; } - return ; + return ; } };