feature: anim for loading screen intro

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,8 +36,44 @@ 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<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>
+        <Transition
+          native
+          items={start}
+          enter={[{ height: 'auto' }]}
+          leave={{ height: 0 }}
+          from={{
+            position: 'absolute',
+            overflow: 'hidden',
+            height: 0,
+          }}
+        >
+          {() => props => (
+            <animated.div style={props}>
               <CircleWrapper>
                 <Logo src={zcashLogo} alt='Zcash logo' />
                 <CircleProgressComponent
@@ -48,5 +85,10 @@ export const LoadingScreen = ({ progress }: { progress: number }) => (
                 />
               </CircleWrapper>
               <TextComponent value='ZEC Wallet Starting' />
+            </animated.div>
+          )}
+        </Transition>
       </Wrapper>
-);
+    );
+  }
+}