From 3cb5d1b5ff9a5571067cfb24d8c0295e3637bc9f Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 7 May 2019 00:25:31 +0200
Subject: [PATCH] nicer first load experience

---
 src/App.css                |  2 +-
 src/App.jsx                | 36 +++++++++++++++++++-----------------
 src/components/Spinner.css |  2 ++
 src/components/Ticker.css  |  1 +
 src/components/Ticker.jsx  |  6 +++---
 src/store/AppProvider.jsx  |  7 ++++---
 6 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9a6875f..07d9ce3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -86,7 +86,7 @@ button {
     background: #fff;
     border-radius: 5px;
     border: .1rem solid #e2e2e2;
-    min-height: 186px;
+    min-height: 222px;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
diff --git a/src/App.jsx b/src/App.jsx
index e6bac1b..c869b60 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -22,25 +22,27 @@ export default class App extends PureComponent {
         <Titlebar />
         <div className="app__content">
           <Consumer>
-            {({ isLoading, accounts }) =>
-              isLoading ? (
-                <Spinner />
-              ) : (
-                <>
-                  <main className="main">
-                    <Total />
+            {({ isLoading, accounts }) => (
+              <>
+                <main className="main">
+                  {isLoading ? (
+                    <Spinner />
+                  ) : (
+                    <>
+                      <Total />
 
-                    <div className="number-unit-wrap number-unit-wrap--accounts">
-                      {accounts.map((account, i) => (
-                        <Account key={i} account={account} />
-                      ))}
-                    </div>
-                  </main>
+                      <div className="number-unit-wrap number-unit-wrap--accounts">
+                        {accounts.map((account, i) => (
+                          <Account key={i} account={account} />
+                        ))}
+                      </div>
+                    </>
+                  )}
+                </main>
 
-                  <Ticker />
-                </>
-              )
-            }
+                <Ticker style={isLoading ? { opacity: 0 } : null} />
+              </>
+            )}
           </Consumer>
         </div>
       </AppProvider>
diff --git a/src/components/Spinner.css b/src/components/Spinner.css
index f97ac4d..640c4a6 100644
--- a/src/components/Spinner.css
+++ b/src/components/Spinner.css
@@ -1,6 +1,8 @@
 .spinner {
     position: relative;
     text-align: center;
+    margin: auto;
+    width: 100%;
 }
 
 .spinner::before {
diff --git a/src/components/Ticker.css b/src/components/Ticker.css
index 85605e0..17a6c01 100644
--- a/src/components/Ticker.css
+++ b/src/components/Ticker.css
@@ -2,6 +2,7 @@
     justify-content: center;
     margin-top: 2rem;
     margin-bottom: 2rem;
+    transition: opacity 1s ease-out;
 }
 
 .ticker .number-unit {
diff --git a/src/components/Ticker.jsx b/src/components/Ticker.jsx
index 9718d88..29bec39 100644
--- a/src/components/Ticker.jsx
+++ b/src/components/Ticker.jsx
@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react'
 import { Consumer } from '../store/createContext'
-import { userlocale } from '../util/moneyFormatter'
+import { locale } from '../util/moneyFormatter'
 import { formatCurrency } from '@coingecko/cryptoformat'
 import './Ticker.css'
 
 export default class Ticker extends PureComponent {
   render() {
     return (
-      <footer className="number-unit-wrap ticker">
+      <footer className="number-unit-wrap ticker" {...this.props}>
         <Consumer>
           {({ toggleCurrencies, currency, prices }) => (
             <>
@@ -18,7 +18,7 @@ export default class Ticker extends PureComponent {
                       'active'}`}
                     onClick={() => toggleCurrencies(key)}
                   >
-                    {formatCurrency(prices[key], key.toUpperCase(), userlocale)
+                    {formatCurrency(prices[key], key.toUpperCase(), locale)
                       .replace(/BTC/, 'Ƀ')
                       .replace(/ETH/, 'Ξ')
                       .replace(/OCEAN/, 'Ọ')}
diff --git a/src/store/AppProvider.jsx b/src/store/AppProvider.jsx
index fa6007f..bbb7464 100644
--- a/src/store/AppProvider.jsx
+++ b/src/store/AppProvider.jsx
@@ -25,10 +25,11 @@ export default class AppProvider extends PureComponent {
   async componentDidMount() {
     await this.fetchAndSetPrices()
     await this.setBalances()
-    this.setState({ isLoading: false })
 
-    setInterval(this.fetchAndSetPrices, ms(refreshInterval))
-    setInterval(this.setBalances, ms(refreshInterval))
+    await setInterval(this.fetchAndSetPrices, ms(refreshInterval))
+    await setInterval(this.setBalances, ms(refreshInterval))
+
+    this.setState({ isLoading: false })
   }
 
   componentWillUnmount() {