feature: add LoadingSpinner in loading screen

app/components/loading-screen.js

@@ -2,19 +2,51 @@
 import React from 'react';
 import styled from 'styled-components';
 
+import CircleProgressComponent from 'react-circle';
 import { TextComponent } from './text';
 
+import zcashLogo from '../assets/images/zcash-simple-icon.svg';
+
+import theme from '../theme';
+
 const Wrapper = styled.div`
   width: 100vw;
   height: 100vh;
   display: flex;
+  flex-direction: column;
   align-items: 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>
-    <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>
 );

app/components/with-daemon-status-check.js

@@ -5,12 +5,13 @@ import { LoadingScreen } from './loading-screen';
 
 import rpc from '../../services/api';
 
+type Props = {};
+
 type State = {
   isRunning: boolean,
+  progress: number,
 };
 
-type Props = {};
-
 /* eslint-disable max-len */
 export const withDaemonStatusCheck = <PassedProps: {}>(
   WrappedComponent: ComponentType<PassedProps>,
@@ -19,6 +20,7 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
 
     state = {
       isRunning: false,
+      progress: 0,
     };
 
     componentDidMount() {
@@ -35,24 +37,36 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
     }
 
     runTest = () => {
-      rpc.getinfo().then((response) => {
-        if (response) {
-          this.setState(() => ({ isRunning: true }));
-          if (this.timer) {
-            clearInterval(this.timer);
-            this.timer = null;
+      rpc
+        .getinfo()
+        .then((response) => {
+          if (response) {
+            setTimeout(() => {
+              this.setState(() => ({ isRunning: true }));
+            }, 500);
+            this.setState(() => ({ progress: 100 }));
+
+            if (this.timer) {
+              clearInterval(this.timer);
+              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() {
-      const { isRunning } = this.state;
+      const { isRunning, progress } = this.state;
 
       if (isRunning) {
         return <WrappedComponent {...this.props} {...this.state} />;
       }
 
-      return <LoadingScreen />;
+      return <LoadingScreen progress={progress} />;
     }
   };