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