diff --git a/app/components/loading-screen.js b/app/components/loading-screen.js index 9e8d7e1..5ce858f 100644 --- a/app/components/loading-screen.js +++ b/app/components/loading-screen.js @@ -1,6 +1,7 @@ // @flow -import React from 'react'; +import React, { PureComponent } from 'react'; import styled from 'styled-components'; +import { Transition, animated } from 'react-spring'; import CircleProgressComponent from 'react-circle'; import { TextComponent } from './text'; @@ -35,18 +36,59 @@ const Logo = styled.img` 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 { + state = { start: false }; + + componentDidMount() { + setTimeout(() => { + this.setState(() => ({ start: true })); + }, TIME_DELAY_ANIM); + } + + render() { + const { start } = this.state; + const { progress } = this.props; + + return ( + + + {() => props => ( + + + + + + + + )} + + + ); + } +}