bitfinexcom · alexstotsky · Jan 30, 2024 · Jan 19, 2024 · Jan 19, 2024 · Jan 19, 2024
diff --git a/src/components/AppSummary/AppSummary.value.js b/src/components/AppSummary/AppSummary.value.js
@@ -5,8 +5,8 @@ import _sortBy from 'lodash/sortBy'
 import { isEmpty } from '@bitfinex/lib-js-util-base'
 
 import NoData from 'ui/NoData'
-import Loading from 'ui/Loading'
 import Chart from 'ui/Charts/Chart'
+import LoadingPlaceholder from 'ui/LoadingPlaceholder'
 import {
   parseChartData,
   getFormattedChartLastValue,
@@ -55,21 +55,36 @@ const AccountSummaryValue = () => {
     [chartData],
   )
 
+  const isLoading = !dataReceived && pageLoading
+
   let showContent
-  if (!dataReceived && pageLoading) {
-    showContent = <Loading />
-  } else if (isEmpty(entries)) {
+  if (!isLoading && isEmpty(entries)) {
     showContent = <NoData title='summary.no_data' />
   } else {
     showContent = (
       <div className='chart-wrapper'>
-        <div className='chart-value'>
-          $
-          {chartLastValue}
-        </div>
-        <div className='chart-value-perc'>
-          {formattedPercValue}
-        </div>
+        {isLoading ? (
+          <LoadingPlaceholder
+            isStrong
+            height={22}
+            baseWidth={72}
+          />
+        ) : (
+          <div className='chart-value'>
+            $
+            {chartLastValue}
+          </div>
+        )}
+        {isLoading ? (
+          <LoadingPlaceholder
+            height={22}
+            baseWidth={36}
+          />
+        ) : (
+          <div className='chart-value-perc'>
+            { formattedPercValue }
+          </div>
+        )}
         <Chart
           aspect={1.455}
           data={chartData}

diff --git a/src/components/AppSummary/_AppSummary.scss b/src/components/AppSummary/_AppSummary.scss
@@ -372,6 +372,18 @@
         color: var(--tableAmountFractionPosColor);;
       }
     }
+
+    .loading-placeholder {
+      position: absolute;
+      top: 50px;
+      left: 15px;
+      z-index: 1;
+
+      &.strong {
+        top: 23px;
+        left: 15px;
+      }
+    }
   }
 
   .line-chart {

diff --git a/src/ui/Charts/Charts.helpers.js b/src/ui/Charts/Charts.helpers.js
@@ -9,10 +9,11 @@ import _isNaN from 'lodash/isNaN'
 import _reduce from 'lodash/reduce'
 import _values from 'lodash/values'
 import _findIndex from 'lodash/findIndex'
+import { isEmpty } from '@bitfinex/lib-js-util-base'
 
 import timeframeConstants from 'ui/TimeFrameSelector/constants'
 
-import { CURRENCY_USD } from './constants'
+import { CURRENCY_USD, DEFAULT_CHART_DATA } from './constants'
 
 const formatValue = val => val && +val.toFixed(2)
 
@@ -38,14 +39,19 @@ const formatTimestamp = (timestamp, timeframe) => {
 }
 
 export const parseChartData = ({ data, timeframe }) => {
-  const chartData = data.map((entry) => {
-    const { mts } = entry
-
-    return {
-      name: formatTimestamp(mts, timeframe),
-      [CURRENCY_USD]: formatValue(entry[CURRENCY_USD]),
-    }
-  })
+  let chartData
+  if (isEmpty(data)) {
+    chartData = DEFAULT_CHART_DATA
+  } else {
+    chartData = data.map((entry) => {
+      const { mts } = entry
+
+      return {
+        name: formatTimestamp(mts, timeframe),
+        [CURRENCY_USD]: formatValue(entry[CURRENCY_USD]),
+      }
+    })
+  }
 
   return {
     chartData,

diff --git a/src/ui/Charts/constants.js b/src/ui/Charts/constants.js
@@ -1,2 +1,14 @@
 /* eslint-disable-next-line import/prefer-default-export */
 export const CURRENCY_USD = 'USD'
+
+export const DEFAULT_CHART_DATA = [
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+  { name: '-', USD: 0 },
+]
diff --git a/src/ui/LoadingPlaceholder/LoadingPlaceholder.js b/src/ui/LoadingPlaceholder/LoadingPlaceholder.js
@@ -0,0 +1,25 @@
+import React, { memo } from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
+const LoadingPlaceholder = ({ height, baseWidth, isStrong }) => {
+  const offset = Math.random() > 0.5 ? 10 : -10
+  const classes = classNames('loading-placeholder', { strong: isStrong })
+  const placeholderSize = { height: `${height}px`, width: `${(baseWidth + offset)}px` }
+
+  return <div className={classes} style={placeholderSize} />
+}
+
+LoadingPlaceholder.propTypes = {
+  height: PropTypes.number,
+  isStrong: PropTypes.bool,
+  baseWidth: PropTypes.number,
+}
+
+LoadingPlaceholder.defaultProps = {
+  height: 22,
+  baseWidth: 80,
+  isStrong: false,
+}
+
+export default memo(LoadingPlaceholder)
diff --git a/src/ui/LoadingPlaceholder/_LoadingPlaceholder.scss b/src/ui/LoadingPlaceholder/_LoadingPlaceholder.scss
@@ -0,0 +1,29 @@
+@keyframes shimmer {
+  0% {
+    background-position: -200px 0;
+  }
+  100% {
+    background-position: 200px 0;
+  }
+}
+
+.loading-placeholder {
+  border-radius: 4px;
+  background: linear-gradient(
+    to right, 
+    rgba(42, 63, 77, 0.4) 10%,
+    rgba(255, 255, 255, 0.2) 30%,
+    rgba(42, 63, 77, 0.8) 60%);
+  background-size: 200px 100%;
+  animation: shimmer 2s infinite linear;
+}
+
+.strong {
+  background: linear-gradient(
+    to right, 
+    rgba(51, 74, 89, 0.5) 10%,
+    rgba(255, 255, 255, 0.4) 50%,
+    rgba(51, 74, 89, 1) 100%);
+  background-size: 200px 100%;
+  animation: shimmer 2s infinite linear;
+}
diff --git a/src/ui/LoadingPlaceholder/index.js b/src/ui/LoadingPlaceholder/index.js
@@ -0,0 +1 @@
+export { default } from './LoadingPlaceholder'
diff --git a/src/ui/_index.scss b/src/ui/_index.scss
@@ -10,6 +10,7 @@
 @import "./GoToRange/_GoToRange.scss";
 @import "./JSONFormat/_JSONFormat.scss";
 @import "./Loading/_Loading.scss";
+@import "./LoadingPlaceholder/_LoadingPlaceholder.scss";
 @import "./MultiSelect/_MultiSelect.scss";
 @import "./NavMenu/_NavMenu.scss";
 @import "./NavMenuDrawer/_NavMenuDrawer.scss";