initial version of a Placeholder for when no countervalues loaded yet

src/components/AccountPage/index.js

@@ -148,10 +148,14 @@ class AccountPage extends PureComponent<Props> {
                 counterValue={counterValue}
                 daysCount={daysCount}
                 selectedTimeRange={selectedTimeRange}
-                renderHeader={({ totalBalance, sinceBalance, refBalance }) => (
+                renderHeader={({ isAvailable, totalBalance, sinceBalance, refBalance }) => (
                   <Box flow={4} mb={2}>
                     <Box horizontal>
-                      <BalanceTotal totalBalance={account.balance} unit={account.unit}>
+                      <BalanceTotal
+                        isAvailable={isAvailable}
+                        totalBalance={account.balance}
+                        unit={account.unit}
+                      >
                         <FormattedVal
                           animateTicker
                           alwaysShowSign={false}
@@ -171,6 +175,7 @@ class AccountPage extends PureComponent<Props> {
                     </Box>
                     <Box horizontal justifyContent="center" flow={7}>
                       <BalanceSincePercent
+                        isAvailable={isAvailable}
                         t={t}
                         alignItems="center"
                         totalBalance={totalBalance}
@@ -179,6 +184,7 @@ class AccountPage extends PureComponent<Props> {
                         since={selectedTimeRange}
                       />
                       <BalanceSinceDiff
+                        isAvailable={isAvailable}
                         t={t}
                         counterValue={counterValue}
                         alignItems="center"

src/components/BalanceSummary/BalanceInfos.js

@@ -9,6 +9,7 @@ import type { T } from 'types/common'
 import Box from 'components/base/Box'
 import FormattedVal from 'components/base/FormattedVal'
 import DeltaChange from '../DeltaChange'
+import { PlaceholderLine } from '../Placeholder'
 
 const Sub = styled(Box).attrs({
   ff: 'Open Sans',
@@ -22,12 +23,14 @@ type BalanceSinceProps = {
   totalBalance: number,
   sinceBalance: number,
   refBalance: number,
+  isAvailable: boolean,
   t: T,
 }
 
 type BalanceTotalProps = {
   children?: any,
   unit: Unit,
+  isAvailable: boolean,
   totalBalance: number,
 }
 
@@ -36,53 +39,73 @@ type Props = {
 } & BalanceSinceProps
 
 export function BalanceSincePercent(props: BalanceSinceProps) {
-  const { t, totalBalance, sinceBalance, refBalance, since, ...otherProps } = props
+  const { t, totalBalance, sinceBalance, refBalance, since, isAvailable, ...otherProps } = props
   return (
     <Box {...otherProps}>
-      <DeltaChange
+      {!isAvailable ? (
-        from={refBalance}
+        <PlaceholderLine width={100} />
-        to={totalBalance}
+      ) : (
-        color="dark"
+        <DeltaChange
-        animateTicker
+          from={refBalance}
-        fontSize={7}
+          to={totalBalance}
-        withIcon
+          color="dark"
-      />
+          animateTicker
-      <Sub>{t(`app:time.since.${since}`)}</Sub>
+          fontSize={7}
+          withIcon
+        />
+      )}
+      {!isAvailable ? (
+        <PlaceholderLine dark width={60} />
+      ) : (
+        <Sub>{t(`app:time.since.${since}`)}</Sub>
+      )}
     </Box>
   )
 }
 
 export function BalanceSinceDiff(props: Props) {
-  const { t, totalBalance, sinceBalance, since, counterValue, ...otherProps } = props
+  const { t, totalBalance, sinceBalance, since, counterValue, isAvailable, ...otherProps } = props
   return (
     <Box {...otherProps}>
-      <FormattedVal
+      {!isAvailable ? (
-        color="dark"
+        <PlaceholderLine width={100} />
-        animateTicker
+      ) : (
-        unit={counterValue.units[0]}
+        <FormattedVal
-        fontSize={7}
+          color="dark"
-        showCode
+          animateTicker
-        val={totalBalance - sinceBalance}
+          unit={counterValue.units[0]}
-        withIcon
+          fontSize={7}
-      />
+          showCode
-      <Sub>{t(`app:time.since.${since}`)}</Sub>
+          val={totalBalance - sinceBalance}
+          withIcon
+        />
+      )}
+      {!isAvailable ? (
+        <PlaceholderLine dark width={60} />
+      ) : (
+        <Sub>{t(`app:time.since.${since}`)}</Sub>
+      )}
     </Box>
   )
 }
 
 export function BalanceTotal(props: BalanceTotalProps) {
-  const { unit, totalBalance, children } = props
+  const { unit, totalBalance, isAvailable, children } = props
   return (
     <Box grow {...props}>
-      <FormattedVal
+      {!isAvailable ? (
-        animateTicker
+        <PlaceholderLine width={150} />
-        color="dark"
+      ) : (
-        unit={unit}
+        <FormattedVal
-        fontSize={8}
+          animateTicker
-        showCode
+          color="dark"
-        val={totalBalance}
+          unit={unit}
-      />
+          fontSize={8}
-      {children}
+          showCode
+          val={totalBalance}
+        />
+      )}
+      {!isAvailable ? <PlaceholderLine dark width={50} /> : children}
     </Box>
   )
 }
@@ -93,16 +116,21 @@ BalanceTotal.defaultProps = {
 }
 
 function BalanceInfos(props: Props) {
-  const { t, totalBalance, since, sinceBalance, refBalance, counterValue } = props
+  const { t, totalBalance, since, sinceBalance, refBalance, isAvailable, counterValue } = props
   return (
     <Box horizontal alignItems="center" flow={7}>
-      <BalanceTotal unit={counterValue.units[0]} totalBalance={totalBalance}>
+      <BalanceTotal
+        unit={counterValue.units[0]}
+        isAvailable={isAvailable}
+        totalBalance={totalBalance}
+      >
         <Sub>{t('app:dashboard.totalBalance')}</Sub>
       </BalanceTotal>
       <BalanceSincePercent
         alignItems="flex-end"
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}
+        isAvailable={isAvailable}
         refBalance={refBalance}
         since={since}
         t={t}
@@ -110,6 +138,7 @@ function BalanceInfos(props: Props) {
       <BalanceSinceDiff
         counterValue={counterValue}
         alignItems="flex-end"
+        isAvailable={isAvailable}
         totalBalance={totalBalance}
         sinceBalance={sinceBalance}
         refBalance={refBalance}

src/components/BalanceSummary/index.js

@@ -21,6 +21,7 @@ type Props = {
     totalBalance: number,
     sinceBalance: number,
     refBalance: number,
+    isAvailable: boolean,
   }) => *,
 }
 
@@ -37,54 +38,54 @@ const BalanceSummary = ({
   return (
     <Card p={0} py={5}>
       <CalculateBalance accounts={accounts} daysCount={daysCount}>
-        {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) =>
+        {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
-          !isAvailable ? null : (
+          <Fragment>
-            <Fragment>
+            {renderHeader ? (
-              {renderHeader ? (
+              <Box px={6}>
-                <Box px={6}>
+                {renderHeader({
-                  {renderHeader({
+                  isAvailable,
-                    selectedTimeRange,
+                  selectedTimeRange,
-                    // FIXME refactor these
+                  // FIXME refactor these
-                    totalBalance: balanceEnd,
+                  totalBalance: balanceEnd,
-                    sinceBalance: balanceStart,
+                  sinceBalance: balanceStart,
-                    refBalance: balanceStart,
+                  refBalance: balanceStart,
-                  })}
+                })}
-                </Box>
-              ) : null}
-              <Box ff="Open Sans" fontSize={4} color="graphite" pt={6}>
-                <Chart
-                  id={chartId}
-                  unit={account ? account.unit : null}
-                  color={chartColor}
-                  data={balanceHistory}
-                  height={200}
-                  currency={counterValue}
-                  tickXScale={selectedTimeRange}
-                  renderTickY={val => formatShort(counterValue.units[0], val)}
-                  renderTooltip={
-                    isAvailable && !account
-                      ? d => (
-                          <Fragment>
-                            <FormattedVal
-                              alwaysShowSign={false}
-                              fontSize={5}
-                              color="dark"
-                              showCode
-                              unit={counterValue.units[0]}
-                              val={d.value}
-                            />
-                            <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
-                              {d.date.toISOString().substr(0, 10)}
-                            </Box>
-                          </Fragment>
-                        )
-                      : undefined
-                  }
-                />
               </Box>
-            </Fragment>
+            ) : null}
-          )
+            <Box ff="Open Sans" fontSize={4} color="graphite" pt={6}>
-        }
+              <Chart
+                id={chartId}
+                unit={account ? account.unit : null}
+                color={!isAvailable ? 'transparent' : chartColor}
+                data={balanceHistory}
+                height={200}
+                currency={counterValue}
+                tickXScale={selectedTimeRange}
+                renderTickY={val => formatShort(counterValue.units[0], val)}
+                isInteractive={isAvailable}
+                renderTooltip={
+                  isAvailable && !account
+                    ? d => (
+                        <Fragment>
+                          <FormattedVal
+                            alwaysShowSign={false}
+                            fontSize={5}
+                            color="dark"
+                            showCode
+                            unit={counterValue.units[0]}
+                            val={d.value}
+                          />
+                          <Box ff="Open Sans|Regular" color="grey" fontSize={3} mt={2}>
+                            {d.date.toISOString().substr(0, 10)}
+                          </Box>
+                        </Fragment>
+                      )
+                    : undefined
+                }
+              />
+            </Box>
+          </Fragment>
+        )}
       </CalculateBalance>
     </Card>
   )

src/components/DashboardPage/index.js

@@ -120,10 +120,17 @@ class DashboardPage extends PureComponent<Props> {
                   accounts={accounts}
                   selectedTimeRange={selectedTimeRange}
                   daysCount={daysCount}
-                  renderHeader={({ totalBalance, selectedTimeRange, sinceBalance, refBalance }) => (
+                  renderHeader={({
+                    isAvailable,
+                    totalBalance,
+                    selectedTimeRange,
+                    sinceBalance,
+                    refBalance,
+                  }) => (
                     <BalanceInfos
                       t={t}
                       counterValue={counterValue}
+                      isAvailable={isAvailable}
                       totalBalance={totalBalance}
                       since={selectedTimeRange}
                       sinceBalance={sinceBalance}

src/components/Placeholder.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components'
+
+export const PlaceholderLine = styled.div`
+  background-color: ${p => (p.dark ? '#C2C2C2' : '#D6D6D6')};
+  width: ${p => p.width}px;
+  height: 10px;
+  border-radius: 5px;
+  margin: 5px 0;
+`

src/config/constants.js

@@ -29,6 +29,10 @@ export const DEVICE_DISCONNECT_DEBOUNCE = intFromEnv('LEDGER_DEVICE_DISCONNECT_D
 
 // Endpoints...
 
+export const LEDGER_COUNTERVALUES_API = stringFromEnv(
+  'LEDGER_COUNTERVALUES_API',
+  'https://ledger-countervalue-poc.herokuapp.com',
+)
 export const LEDGER_REST_API_BASE = stringFromEnv(
   'LEDGER_REST_API_BASE',
   'https://api.ledgerwallet.com/',

src/helpers/countervalues.js

@@ -1,6 +1,7 @@
 // @flow
 
 import { createSelector } from 'reselect'
+import { LEDGER_COUNTERVALUES_API } from 'config/constants'
 import createCounterValues from '@ledgerhq/live-common/lib/countervalues'
 import { setExchangePairsAction } from 'actions/settings'
 import { currenciesSelector } from 'reducers/accounts'
@@ -53,7 +54,7 @@ const addExtraPollingHooks = (schedulePoll, cancelPoll) => {
 
 const CounterValues = createCounterValues({
   log: (...args) => logger.log('CounterValues:', ...args),
-  getAPIBaseURL: () => 'https://ledger-countervalue-poc.herokuapp.com',
+  getAPIBaseURL: () => LEDGER_COUNTERVALUES_API,
   storeSelector: state => state.countervalues,
   pairsSelector,
   setExchangePairsAction,