changes splash experience

- disable spin button
 - startup status changes from tzarebczan

src/ui/component/button/view.jsx

@@ -70,6 +70,7 @@ const Button = forwardRef<any, {}>((props: Props, ref: any) => {
           'button--disabled': disabled,
           'button--link': button === 'link',
           'button--constrict': constrict,
+          'button--splash': button === 'splash',
         }
       : 'button--no-style',
     className

src/ui/component/splash/index.js

@@ -1,17 +1,23 @@
 import { connect } from 'react-redux';
 import { selectDaemonVersionMatched, selectModal } from 'redux/selectors/app';
 import { doCheckDaemonVersion, doNotifyUnlockWallet, doHideModal } from 'redux/actions/app';
+import { doSetClientSetting } from 'redux/actions/settings';
+import * as settings from 'constants/settings';
 import SplashScreen from './view';
 
+import { makeSelectClientSetting } from 'redux/selectors/settings';
+
 const select = state => ({
   modal: selectModal(state),
   daemonVersionMatched: selectDaemonVersionMatched(state),
+  animationHidden: makeSelectClientSetting(settings.HIDE_SPLASH_ANIMATION)(state),
 });
 
 const perform = dispatch => ({
   checkDaemonVersion: () => dispatch(doCheckDaemonVersion()),
   notifyUnlockWallet: () => dispatch(doNotifyUnlockWallet()),
   hideModal: () => dispatch(doHideModal()),
+  setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
 });
 
 export default connect(

src/ui/component/splash/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import * as MODALS from 'constants/modal_types';
+import * as SETTINGS from 'constants/settings';
 import React from 'react';
 import { Lbry } from 'lbry-redux';
 import Button from 'component/button';
@@ -10,6 +11,7 @@ import ModalDownloading from 'modal/modalDownloading';
 import 'css-doodle';
 
 const FORTY_FIVE_SECONDS = 45 * 1000;
+type SetDaemonSettingArg = boolean | string | number;
 
 type Props = {
   checkDaemonVersion: () => Promise<any>,
@@ -21,6 +23,8 @@ type Props = {
   modal: ?{
     id: string,
   },
+  animationHidden: boolean,
+  setClientSetting: (string, SetDaemonSettingArg) => void,
 };
 
 type State = {
@@ -37,7 +41,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
     super(props);
 
     this.state = {
-      details: __('Starting up'),
+      details: __('Starting...'),
       message: __('Connecting'),
       launchedModal: false,
       error: false,
@@ -112,10 +116,10 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
       this.hasRecordedUser = true;
     }
 
-    const { wallet, blockchain_headers: blockchainHeaders } = status;
+    const { wallet, startup_status: startupStatus, blockchain_headers: blockchainHeaders } = status;
 
     // If the wallet is locked, stop doing anything and make the user input their password
-    if (wallet && wallet.is_locked) {
+    if (status.is_running && wallet && wallet.is_locked) {
       // Clear the error timeout, it might sit on this step for a while until someone enters their password
       if (this.timeout) {
         clearTimeout(this.timeout);
@@ -141,20 +145,31 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
       if (blockChainHeaders.download_progress < 100) {
         this.setState({
           message: __('Blockchain Sync'),
-          details: `${__('Catching up with the blockchain')} (${blockchainHeaders.download_progress}%)`,
+          details: `${__('Catching up...')} (${blockchainHeaders.download_progress}%)`,
         });
+        if (this.timeout) {
+          clearTimeout(this.timeout);
+        }
       }
     } else if (wallet && wallet.blocks_behind > 0) {
       const format = wallet.blocks_behind === 1 ? '%s block behind' : '%s blocks behind';
       this.setState({
         message: __('Blockchain Sync'),
-        details: __(format, wallet.blocks_behind),
-      });
-    } else if (wallet && wallet.blocks_behind === 0) {
-      this.setState({
-        message: 'Network Loading',
-        details: 'Initializing LBRY service...',
+        details: `${__('Catching up...')} (${__(format, wallet.blocks_behind)})`,
       });
+      if (this.timeout) {
+        clearTimeout(this.timeout);
+      }
+    } else if (wallet && wallet.blocks_behind === 0 && !status.is_running && startupStatus.database) {
+      // Usually the transaction sync state, there's no status for this yet
+      // Only show after user has been waiting 10 seconds
+      // https://github.com/lbryio/lbry-sdk/issues/2314
+      setTimeout(() => {
+        this.setState({
+          message: 'Initializing',
+          details: 'Almost done...',
+        });
+      }, 10000);
     }
 
     setTimeout(() => {
@@ -208,12 +223,17 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
   }
 
   render() {
-    const { error } = this.state;
+    const { error, details } = this.state;
+    const { animationHidden, setClientSetting } = this.props;
 
     return (
       <div className="splash">
-        <css-doodle>
-          {`
+        <h1 className="splash__title">LBRY</h1>
+        <div className="splash__details">{details}</div>
+
+        {!animationHidden && (
+          <css-doodle class="doodle">
+            {`
             --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
             :doodle {
               @grid: 30x1 / 18vmin;
@@ -246,8 +266,14 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
             }
           )
           `}
-        </css-doodle>
-        <h1 className="splash__title">LBRY</h1>
+          </css-doodle>
+        )}
+        <Button
+          className="splash__controls"
+          button="splash"
+          label={!animationHidden ? __('I feel woosy! Stop spinning!') : 'Spin Spin Sugar'}
+          onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
+        />
         {error && (
           <div className="splash__error card card--section">
             <h3>{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}</h3>

src/ui/constants/settings.js

@@ -18,3 +18,4 @@ export const OS_NOTIFICATIONS_ENABLED = 'osNotificationsEnabled';
 export const AUTO_DOWNLOAD = 'autoDownload';
 export const SUPPORT_OPTION = 'supportOption';
 export const HIDE_BALANCE = 'hideBalance';
+export const HIDE_SPLASH_ANIMATION = 'hideSplashAnimation';

src/ui/redux/reducers/settings.js

@@ -30,6 +30,7 @@ const defaultState = {
     [SETTINGS.AUTO_DOWNLOAD]: getLocalStorageSetting(SETTINGS.AUTO_DOWNLOAD, true),
     [SETTINGS.OS_NOTIFICATIONS_ENABLED]: Boolean(getLocalStorageSetting(SETTINGS.OS_NOTIFICATIONS_ENABLED, true)),
     [SETTINGS.HIDE_BALANCE]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_BALANCE, false)),
+    [SETTINGS.HIDE_SPLASH_ANIMATION]: Boolean(getLocalStorageSetting(SETTINGS.HIDE_SPLASH_ANIMATION, false)),
   },
   isNight: false,
   languages: { en: 'English', pl: 'Polish', id: 'Bahasa Indonesia' }, // temporarily hard code these so we can advance i18n testing

src/ui/scss/component/_button.scss

@@ -31,11 +31,14 @@
 }
 
 .button--primary,
-.button--inverse {
+.button--inverse,
+.button--splash {
   height: var(--button-height);
   border-radius: var(--button-radius);
   padding-top: 0;
   padding-bottom: 0;
+  padding-right: 1em;
+  padding-left: 1em;
   box-sizing: border-box;
 }
 
@@ -52,6 +55,21 @@
   }
 }
 
+.button--splash {
+  border-color: $lbry-white;
+  color: $lbry-white;
+  background-color: rgba($lbry-white, 0.2);
+  font-size: var(--font-label);
+
+  &:hover {
+    color: $lbry-white;
+    background-color: rgba($lbry-white, 0.5);
+    .icon {
+      stroke: $lbry-white;
+    }
+  }
+}
+
 .button--alt {
   padding: 0;
 }

src/ui/scss/component/_splash.scss

@@ -5,6 +5,7 @@
   align-items: center;
   background-color: var(--color-background);
   display: flex;
+  flex-direction: column;
   justify-content: center;
   overflow: hidden;
 }
@@ -26,9 +27,12 @@
 }
 
 .splash__details {
-  font-weight: 600;
+  position: absolute;
+  font-size: 12px;
   line-height: 1;
-  max-width: 400px;
+  font-weight: 300;
+  color: $lbry-white;
+  margin-top: 2rem;
 }
 
 .splash__title {
@@ -37,10 +41,21 @@
   line-height: 1;
   font-weight: 700;
   color: $lbry-white;
+  margin-top: -1rem;
+}
+
+.splash__controls {
+  position: fixed;
+  bottom: 30px;
+  right: 30px;
 }
 
 .splash__error {
   position: absolute;
-  margin-top: 25rem;
+  margin-top: 20rem;
   box-shadow: var(--card-box-shadow) $lbry-gray-5;
 }
+
+.doodle {
+  position: fixed;
+}