feature: add LoadingSpinner in loading screen
This commit is contained in:
parent
339c992ef6
commit
e87663e94f
|
@ -2,19 +2,51 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import CircleProgressComponent from 'react-circle';
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
import zcashLogo from '../assets/images/zcash-simple-icon.svg';
|
||||||
|
|
||||||
|
import theme from '../theme';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: 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 }) => (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<TextComponent value='Loading daemon...' />
|
<CircleWrapper>
|
||||||
|
<Logo src={zcashLogo} alt='Zcash logo' />
|
||||||
|
<CircleProgressComponent
|
||||||
|
progress={progress}
|
||||||
|
responsive
|
||||||
|
showPercentage={false}
|
||||||
|
progressColor={theme.colors.activeItem}
|
||||||
|
bgColor={theme.colors.inactiveItem}
|
||||||
|
/>
|
||||||
|
</CircleWrapper>
|
||||||
|
<TextComponent value='Zcash Application Starting' />
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
|
@ -5,12 +5,13 @@ import { LoadingScreen } from './loading-screen';
|
||||||
|
|
||||||
import rpc from '../../services/api';
|
import rpc from '../../services/api';
|
||||||
|
|
||||||
|
type Props = {};
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
isRunning: boolean,
|
isRunning: boolean,
|
||||||
|
progress: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = {};
|
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
export const withDaemonStatusCheck = <PassedProps: {}>(
|
export const withDaemonStatusCheck = <PassedProps: {}>(
|
||||||
WrappedComponent: ComponentType<PassedProps>,
|
WrappedComponent: ComponentType<PassedProps>,
|
||||||
|
@ -19,6 +20,7 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
isRunning: false,
|
isRunning: false,
|
||||||
|
progress: 0,
|
||||||
};
|
};
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
@ -35,24 +37,36 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
||||||
}
|
}
|
||||||
|
|
||||||
runTest = () => {
|
runTest = () => {
|
||||||
rpc.getinfo().then((response) => {
|
rpc
|
||||||
|
.getinfo()
|
||||||
|
.then((response) => {
|
||||||
if (response) {
|
if (response) {
|
||||||
|
setTimeout(() => {
|
||||||
this.setState(() => ({ isRunning: true }));
|
this.setState(() => ({ isRunning: true }));
|
||||||
|
}, 500);
|
||||||
|
this.setState(() => ({ progress: 100 }));
|
||||||
|
|
||||||
if (this.timer) {
|
if (this.timer) {
|
||||||
clearInterval(this.timer);
|
clearInterval(this.timer);
|
||||||
this.timer = null;
|
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() {
|
render() {
|
||||||
const { isRunning } = this.state;
|
const { isRunning, progress } = this.state;
|
||||||
|
|
||||||
if (isRunning) {
|
if (isRunning) {
|
||||||
return <WrappedComponent {...this.props} {...this.state} />;
|
return <WrappedComponent {...this.props} {...this.state} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
return <LoadingScreen />;
|
return <LoadingScreen progress={progress} />;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue