Merge pull request #25 from andrerfneves/feature/loading-screen-spinner

Feature/loading screen spinner

app/assets/images/zcash-simple-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="19.818" height="35.161" viewBox="0 0 19.818 35.161"><defs><style>.a{fill:#FCD639;}</style></defs><path class="a" d="M541.425,662.318v4.555h-7.678v5.678H545.5l-11.751,16v4.261h7.678v4.665h4.563v-4.665h7.577v-5.666H541.788l11.777-16v-4.273h-7.577v-4.555Z" transform="translate(-533.747 -662.318)"/></svg>

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} />;
     }
   };

package.json

@@ -103,6 +103,7 @@
     "process-exists": "^3.1.0",
     "qrcode.react": "^0.8.0",
     "react": "^16.6.0",
+    "react-circle": "^1.1.1",
     "react-click-outside": "tj/react-click-outside",
     "react-dom": "^16.6.0",
     "react-popover": "^0.5.10",

yarn.lock

@@ -11921,6 +11921,11 @@ re-resizable@^4.11.0:
   resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-4.11.0.tgz#d5df10bda445c4ec0945751a223bf195afb61890"
   integrity sha512-dye+7rERqNf/6mDT1iwps+4Gf42420xuZgygF33uX178DxffqcyeuHbBuJ382FIcB5iP6mMZOhfW7kI0uXwb/Q==
 
+react-circle@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-circle/-/react-circle-1.1.1.tgz#f97ccf3e2a37a91ea50280ea8262420e0d1de60c"
+  integrity sha512-iphQfy+MRuNuBqJyZlGKbxyBJhDszaiT5eTiilFFPuwo5nsW5k/uH0KCq/sXXBMiJpLJ/Ly3arkUDvrK62Zung==
+
 react-click-outside@tj/react-click-outside:
   version "1.1.1"
   resolved "https://codeload.github.com/tj/react-click-outside/tar.gz/a833ddc5be47490307f9fcc6ed09d8c353108510"