style(loading): fade out loading bolt

Show the loading bolt for a little longer and fade it out when it
unmounts.

app/components/LoadingBolt/LoadingBolt.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
-
+import { Transition, animated, config } from 'react-spring'
 import cloudLightningIcon from 'icons/cloud_lightning.svg'
 
 import { FormattedMessage } from 'react-intl'
@@ -9,18 +9,31 @@ import messages from './messages'
 
 import styles from './LoadingBolt.scss'
 
-const LoadingBolt = ({ theme }) => (
-  <div className={`${styles.container} ${theme}`}>
-    <div className={styles.content}>
-      <Isvg className={styles.bolt} src={cloudLightningIcon} />
-      <h1>
-        <FormattedMessage {...messages.loading} />
-      </h1>
-    </div>
-  </div>
-)
+class LoadingBolt extends React.PureComponent {
+  render() {
+    const { theme, visible = true } = this.props
+    return (
+      <div>
+        <Transition enter={{ opacity: 1 }} leave={{ opacity: 0 }} config={config.slow} native>
+          {visible &&
+            (springStyles => (
+              <animated.div style={springStyles} className={`${styles.container} ${theme}`}>
+                <div className={styles.content}>
+                  <Isvg className={styles.bolt} src={cloudLightningIcon} />
+                  <h1>
+                    <FormattedMessage {...messages.loading} />
+                  </h1>
+                </div>
+              </animated.div>
+            ))}
+        </Transition>
+      </div>
+    )
+  }
+}
 
 LoadingBolt.propTypes = {
+  visible: PropTypes.bool,
   theme: PropTypes.string.isRequired
 }
 

app/components/LoadingBolt/LoadingBolt.scss

@@ -8,7 +8,7 @@
   width: 100%;
   height: 100%;
   text-align: center;
-  background: linear-gradient(-45deg, rgba(255, 189, 89, 0.7) 10%, rgba(253, 152, 0, 0.85), var(--lightestBackground), var(--darkestBackground));
+  background: linear-gradient(-45deg, rgba(255, 189, 89, 1) 10%, rgba(253, 152, 0, 1), var(--lightestBackground), var(--darkestBackground));
   background-size: 400% 400%;
   -webkit-animation: Gradient 15s ease infinite;
   -moz-animation: Gradient 15s ease infinite;

app/containers/Root.js

@@ -209,14 +209,22 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
 }
 
 const Root = ({ history, lnd, onboardingProps, syncingProps }) => {
-  // If we are onboarding show the onboarding screen.
-  if (onboardingProps.onboarding.onboarding) {
-    return <Onboarding {...onboardingProps} />
+  // If we are have not yet onboarded, show the loading/onboarding screen.
+  if (!onboardingProps.onboarding.onboarded) {
+    return (
+      <div>
+        <LoadingBolt
+          theme={onboardingProps.theme}
+          visible={!onboardingProps.onboarding.onboarding}
+        />
+        <Onboarding {...onboardingProps} />
+        <Syncing {...syncingProps} />
+      </div>
+    )
   }
 
   // If we are syncing show the syncing screen.
   if (
-    onboardingProps.onboarding.onboarded &&
     lnd.lightningGrpcActive &&
     onboardingProps.onboarding.connectionType === 'local' &&
     lnd.syncStatus !== 'complete'

app/lib/zap/controller.js

@@ -74,7 +74,7 @@ class ZapController {
     this.mainWindow = mainWindow
 
     // Time for the splash screen to remain visible.
-    this.splashScreenTime = 500
+    this.splashScreenTime = 1500
 
     // Initialize the state machine.
     this._fsm()

package.json

@@ -309,6 +309,7 @@
     "react-redux": "^5.0.7",
     "react-router-dom": "^4.3.1",
     "react-router-redux": "^5.0.0-alpha.9",
+    "react-spring": "^5.8.0",
     "redux": "^4.0.0",
     "redux-electron-ipc": "^1.1.13",
     "redux-thunk": "^2.3.0",

test/unit/zap/controller.spec.js

@@ -15,7 +15,7 @@ describe('ZapController', function() {
         expect(this.controller.lndConfig).toBeInstanceOf(LndConfig)
       })
       it('should set the "splashScreenTime" property to 500', () => {
-        expect(this.controller.splashScreenTime).toEqual(500)
+        expect(this.controller.splashScreenTime).toEqual(1500)
       })
       it('should set the "mainWindow" property to undefined', () => {
         expect(this.controller.mainWindow).toBeUndefined()

yarn.lock

@@ -10434,6 +10434,12 @@ react-router@^4.2.0, react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
+react-spring@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-5.8.0.tgz#52d8206487692b99c223377c252acea645d77307"
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+
 react-test-renderer@^16.0.0-0:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"