nicer first load experience

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;

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>

src/components/Spinner.css

@@ -1,6 +1,8 @@
 .spinner {
     position: relative;
     text-align: center;
+    margin: auto;
+    width: 100%;
 }
 
 .spinner::before {

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 {

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/, 'Ọ')}

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() {