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 => (
+
+
+
+
+
+
+
+ )}
+
+
+ );
+ }
+}