feature: anim for loading screen intro
This commit is contained in:
parent
0b9bfc0c17
commit
a7d942feb1
|
@ -1,6 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React, { PureComponent } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
import { Transition, animated } from 'react-spring';
|
||||||
|
|
||||||
import CircleProgressComponent from 'react-circle';
|
import CircleProgressComponent from 'react-circle';
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
|
@ -35,8 +36,44 @@ const Logo = styled.img`
|
||||||
left: calc(50% - 25px);
|
left: calc(50% - 25px);
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const LoadingScreen = ({ progress }: { progress: number }) => (
|
type Props = {
|
||||||
|
progress: number,
|
||||||
|
}
|
||||||
|
|
||||||
|
type State = {
|
||||||
|
start: boolean,
|
||||||
|
}
|
||||||
|
|
||||||
|
const TIME_DELAY_ANIM = 100;
|
||||||
|
|
||||||
|
export class LoadingScreen extends PureComponent<Props, State> {
|
||||||
|
state = { start: false };
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.setState(() => ({ start: true }));
|
||||||
|
}, TIME_DELAY_ANIM);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { start } = this.state;
|
||||||
|
const { progress } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
|
<Transition
|
||||||
|
native
|
||||||
|
items={start}
|
||||||
|
enter={[{ height: 'auto' }]}
|
||||||
|
leave={{ height: 0 }}
|
||||||
|
from={{
|
||||||
|
position: 'absolute',
|
||||||
|
overflow: 'hidden',
|
||||||
|
height: 0,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{() => props => (
|
||||||
|
<animated.div style={props}>
|
||||||
<CircleWrapper>
|
<CircleWrapper>
|
||||||
<Logo src={zcashLogo} alt='Zcash logo' />
|
<Logo src={zcashLogo} alt='Zcash logo' />
|
||||||
<CircleProgressComponent
|
<CircleProgressComponent
|
||||||
|
@ -48,5 +85,10 @@ export const LoadingScreen = ({ progress }: { progress: number }) => (
|
||||||
/>
|
/>
|
||||||
</CircleWrapper>
|
</CircleWrapper>
|
||||||
<TextComponent value='ZEC Wallet Starting' />
|
<TextComponent value='ZEC Wallet Starting' />
|
||||||
|
</animated.div>
|
||||||
|
)}
|
||||||
|
</Transition>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue