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,9 +39,12 @@ 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}>
+      {!isAvailable ? (
+        <PlaceholderLine width={100} />
+      ) : (
         <DeltaChange
           from={refBalance}
           to={totalBalance}
@@ -47,15 +53,23 @@ export function BalanceSincePercent(props: BalanceSinceProps) {
           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}>
+      {!isAvailable ? (
+        <PlaceholderLine width={100} />
+      ) : (
         <FormattedVal
           color="dark"
           animateTicker
@@ -65,15 +79,23 @@ export function BalanceSinceDiff(props: Props) {
           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}>
+      {!isAvailable ? (
+        <PlaceholderLine width={150} />
+      ) : (
         <FormattedVal
           animateTicker
           color="dark"
@@ -82,7 +104,8 @@ export function BalanceTotal(props: BalanceTotalProps) {
           showCode
           val={totalBalance}
         />
-      {children}
+      )}
+      {!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,12 +38,12 @@ const BalanceSummary = ({
   return (
     <Card p={0} py={5}>
       <CalculateBalance accounts={accounts} daysCount={daysCount}>
-        {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) =>
+        {({ isAvailable, balanceHistory, balanceStart, balanceEnd }) => (
-          !isAvailable ? null : (
           <Fragment>
             {renderHeader ? (
               <Box px={6}>
                 {renderHeader({
+                  isAvailable,
                   selectedTimeRange,
                   // FIXME refactor these
                   totalBalance: balanceEnd,
@@ -55,12 +56,13 @@ const BalanceSummary = ({
               <Chart
                 id={chartId}
                 unit={account ? account.unit : null}
-                  color={chartColor}
+                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 => (
@@ -83,8 +85,7 @@ const BalanceSummary = ({
               />
             </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,