Merge pull request #779 from alexstotsky/improve-tables-loading

(improvements) Tables states representation
bitfinexcom · Mar 5, 2024 · bb6336b · bb6336b
2 parents fdf94e3 + cf2538d
commit bb6336b
Show file tree

Hide file tree

Showing 68 changed files with 1,728 additions and 854 deletions.
diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
@@ -183,6 +183,7 @@
     "mobile": "Mobile",
     "moreDetails": "More Details",
     "movementsTotal": "Movements Total Amount (USD)",
+    "noResults": "No results",
     "note": "Note",
     "opened": "Opened",
     "orderid": "Order ID",

diff --git a/src/components/AccountSummary/AccountSummary.derivFees.js b/src/components/AccountSummary/AccountSummary.derivFees.js
@@ -3,12 +3,18 @@ import PropTypes from 'prop-types'
 import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
-import { getTooltipContent } from 'utils/columns'
 import { formatAmount, formatFraction } from 'ui/utils'
+import { getCellLoader, getCellNoData, getTooltipContent } from 'utils/columns'
 
 const getColor = val => (val > 0 ? 'red' : 'green')
 
-const getColumns = ({ makerFee, takerFee, t }) => {
+const getColumns = ({
+  t,
+  takerFee,
+  makerFee,
+  isNoData,
+  isLoading,
+}) => {
   const formattedMakerFee = `${formatFraction(makerFee * 100, { minDigits: 2 })}%`
   const formattedTakerFee = `${formatFraction(takerFee * 100, { minDigits: 2 })}%`
 
@@ -17,24 +23,32 @@ const getColumns = ({ makerFee, takerFee, t }) => {
       id: 'makerFee',
       name: makerFee > 0 ? 'column.maker_fees' : 'column.maker_rebate',
       width: 100,
-      renderer: () => (
-        <Cell tooltip={getTooltipContent(formattedMakerFee, t)}>
-          {formatAmount(makerFee * 100, { color: getColor(makerFee), minDigits: 2 })}
-          %
-        </Cell>
-      ),
+      renderer: () => {
+        if (isLoading) return getCellLoader(14, 72)
+        if (isNoData) return getCellNoData(t('column.noResults'))
+        return (
+          <Cell tooltip={getTooltipContent(formattedMakerFee, t)}>
+            {formatAmount(makerFee * 100, { color: getColor(makerFee), minDigits: 2 })}
+            %
+          </Cell>
+        )
+      },
       copyText: () => formattedMakerFee,
     },
     {
       id: 'takerFee',
       name: takerFee > 0 ? 'column.taker_fees' : 'column.taker_rebate',
       width: 100,
-      renderer: () => (
-        <Cell tooltip={getTooltipContent(formattedTakerFee, t)}>
-          {formatAmount(takerFee * 100, { color: getColor(takerFee), minDigits: 2 })}
-          %
-        </Cell>
-      ),
+      renderer: () => {
+        if (isLoading) return getCellLoader(14, 72)
+        if (isNoData) return getCellNoData()
+        return (
+          <Cell tooltip={getTooltipContent(formattedTakerFee, t)}>
+            {formatAmount(takerFee * 100, { color: getColor(takerFee), minDigits: 2 })}
+            %
+          </Cell>
+        )
+      },
       copyText: () => formattedTakerFee,
     },
   ]
@@ -45,8 +59,12 @@ const AccountSummaryDerivFees = ({
   title,
   makerFee,
   takerFee,
+  isNoData,
+  isLoading,
 }) => {
-  const columns = getColumns({ makerFee, takerFee, t })
+  const columns = getColumns({
+    makerFee, takerFee, t, isNoData, isLoading,
+  })
 
   return (
     <div className='section-account-summary-data-item'>
@@ -67,6 +85,8 @@ AccountSummaryDerivFees.propTypes = {
   title: PropTypes.string.isRequired,
   makerFee: PropTypes.number.isRequired,
   takerFee: PropTypes.number.isRequired,
+  isNoData: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
 }
 
 export default memo(AccountSummaryDerivFees)
diff --git a/src/components/AccountSummary/AccountSummary.feeTierVolume.js b/src/components/AccountSummary/AccountSummary.feeTierVolume.js
@@ -6,11 +6,18 @@ import DataTable from 'ui/DataTable'
 
 import { getColumns } from './AccountSummary.paidFees'
 
-const AccountSummaryFeeTierVolume = ({ data, t }) => {
+const AccountSummaryFeeTierVolume = ({
+  t,
+  data,
+  isNoData,
+  isLoading,
+}) => {
   const lastVolumeItem = get(data, [data.length - 1], {})
   const { curr, vol_safe: amount } = lastVolumeItem
 
-  const columns = getColumns({ data: [{ curr, amount }], t })
+  const columns = getColumns({
+    data: [{ curr, amount }], t, isNoData, isLoading,
+  })
 
   return (
     <div className='section-account-summary-data-item'>
@@ -28,6 +35,8 @@ AccountSummaryFeeTierVolume.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({
     curr: PropTypes.string,
   })).isRequired,
+  isNoData: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
 }
 
 export default memo(AccountSummaryFeeTierVolume)
diff --git a/src/components/AccountSummary/AccountSummary.fees.js b/src/components/AccountSummary/AccountSummary.fees.js
@@ -3,13 +3,15 @@ import PropTypes from 'prop-types'
 import { Cell } from '@blueprintjs/table'
 
 import DataTable from 'ui/DataTable'
-import { getTooltipContent } from 'utils/columns'
 import { formatAmount, formatFraction } from 'ui/utils'
+import { getCellLoader, getCellNoData, getTooltipContent } from 'utils/columns'
 
 const getColor = val => (val > 0 ? 'red' : 'green')
 
 const getColumns = ({
   t,
+  isNoData,
+  isLoading,
   makerFee,
   takerFeeToFiat,
   takerFeeToStable,
@@ -25,48 +27,64 @@ const getColumns = ({
       id: 'makerFee',
       name: makerFee > 0 ? 'column.maker_fees' : 'column.maker_rebate',
       width: 100,
-      renderer: () => (
-        <Cell tooltip={getTooltipContent(formattedMakerFee, t)}>
-          {formatAmount(makerFee * 100, { color: getColor(makerFee), minDigits: 2 })}
-          %
-        </Cell>
-      ),
+      renderer: () => {
+        if (isLoading) return getCellLoader(14, 72)
+        if (isNoData) return getCellNoData(t('column.noResults'))
+        return (
+          <Cell tooltip={getTooltipContent(formattedMakerFee, t)}>
+            {formatAmount(makerFee * 100, { color: getColor(makerFee), minDigits: 2 })}
+            %
+          </Cell>
+        )
+      },
       copyText: () => formattedMakerFee,
     },
     {
       id: 'takerFeeCrypto',
       name: takerFeeToCrypto > 0 ? 'column.taker_fees_crypto' : 'column.taker_rebate_crypto',
       width: 140,
-      renderer: () => (
-        <Cell tooltip={getTooltipContent(formattedTakerFeeToCrypto, t)}>
-          {formatAmount(takerFeeToCrypto * 100, { color: getColor(takerFeeToCrypto), minDigits: 2 })}
-          %
-        </Cell>
-      ),
+      renderer: () => {
+        if (isLoading) return getCellLoader(14, 72)
+        if (isNoData) return getCellNoData()
+        return (
+          <Cell tooltip={getTooltipContent(formattedTakerFeeToCrypto, t)}>
+            {formatAmount(takerFeeToCrypto * 100, { color: getColor(takerFeeToCrypto), minDigits: 2 })}
+            %
+          </Cell>
+        )
+      },
       copyText: () => formattedTakerFeeToCrypto,
     },
     {
       id: 'takerFeeFiat',
       name: takerFeeToFiat > 0 ? 'column.taker_fees_fiat' : 'column.taker_rebate_fiat',
       width: 140,
-      renderer: () => (
-        <Cell tooltip={getTooltipContent(formattedTakerFeeToFiat, t)}>
-          {formatAmount(takerFeeToFiat * 100, { color: getColor(takerFeeToFiat), minDigits: 2 })}
-          %
-        </Cell>
-      ),
+      renderer: () => {
+        if (isLoading) return getCellLoader(14, 72)
+        if (isNoData) return getCellNoData()
+        return (
+          <Cell tooltip={getTooltipContent(formattedTakerFeeToFiat, t)}>
+            {formatAmount(takerFeeToFiat * 100, { color: getColor(takerFeeToFiat), minDigits: 2 })}
+            %
+          </Cell>
+        )
+      },
       copyText: () => formattedTakerFeeToFiat,
     },
     {
       id: 'takerFeeStable',
       name: takerFeeToStable > 0 ? 'column.taker_fees_stable' : 'column.taker_rebate_stable',
       width: 140,
-      renderer: () => (
-        <Cell tooltip={getTooltipContent(formattedTakerFeeToStable, t)}>
-          {formatAmount(takerFeeToStable * 100, { color: getColor(takerFeeToStable), minDigits: 2 })}
-          %
-        </Cell>
-      ),
+      renderer: () => {
+        if (isLoading) return getCellLoader(14, 72)
+        if (isNoData) return getCellNoData()
+        return (
+          <Cell tooltip={getTooltipContent(formattedTakerFeeToStable, t)}>
+            {formatAmount(takerFeeToStable * 100, { color: getColor(takerFeeToStable), minDigits: 2 })}
+            %
+          </Cell>
+        )
+      },
       copyText: () => formattedTakerFeeToStable,
     },
   ]
@@ -76,6 +94,8 @@ const AccountSummaryFees = ({
   t,
   data,
   title,
+  isNoData,
+  isLoading,
 }) => {
   const {
     makerFee,
@@ -90,6 +110,8 @@ const AccountSummaryFees = ({
 
   const columns = getColumns({
     t,
+    isNoData,
+    isLoading,
     makerFee: makerFee || makerRebate || 0,
     takerFeeToCrypto: takerFeeToCrypto || takerRebateToCrypto || 0,
     takerFeeToFiat: takerFeeToFiat || takerRebateToFiat || 0,
@@ -123,6 +145,8 @@ AccountSummaryFees.propTypes = {
   }).isRequired,
   title: PropTypes.string.isRequired,
   t: PropTypes.func.isRequired,
+  isNoData: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
 }
 
 export default memo(AccountSummaryFees)
diff --git a/src/components/AccountSummary/AccountSummary.js b/src/components/AccountSummary/AccountSummary.js
@@ -3,8 +3,6 @@ import PropTypes from 'prop-types'
 import { Card, Elevation } from '@blueprintjs/core'
 import { get, isEmpty } from '@bitfinex/lib-js-util-base'
 
-import NoData from 'ui/NoData'
-import Loading from 'ui/Loading'
 import SectionHeader from 'ui/SectionHeader'
 
 import Leo from './AccountSummary.leo'
@@ -43,7 +41,6 @@ class AccountSummary extends PureComponent {
     fetchData: PropTypes.func.isRequired,
     isTurkishSite: PropTypes.bool.isRequired,
     pageLoading: PropTypes.bool.isRequired,
-    refresh: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
   }
 
@@ -64,39 +61,51 @@ class AccountSummary extends PureComponent {
     const {
       t,
       data,
-      refresh,
       pageLoading,
       dataReceived,
       isTurkishSite,
     } = this.props
+    const isNoData = isEmpty(data)
+    const isLoading = !dataReceived && pageLoading
 
-    let showContent
-    if (!dataReceived && pageLoading) {
-      showContent = <Loading />
-    } else if (isEmpty(data)) {
-      showContent = <NoData refresh={refresh} />
-    } else {
-      showContent = (
+    return (
+      <Card
+        elevation={Elevation.ZERO}
+        className='col-lg-12 col-md-12 col-sm-12 col-xs-12 no-table-scroll'
+      >
+        <SectionHeader
+          filter={false}
+          timeframe={false}
+          title='accountsummary.title'
+        />
         <div className='section-account-summary-data'>
           <Volume
             t={t}
+            isNoData={isNoData}
+            isLoading={isLoading}
             data={get(data, 'trade_vol_30d', [])}
           />
           <Fees
             t={t}
             data={data}
+            isNoData={isNoData}
+            isLoading={isLoading}
             title='accountsummary.fees'
           />
           {!isTurkishSite && (
             <>
               <DerivFees
                 t={t}
+                isNoData={isNoData}
+                isLoading={isLoading}
                 title='accountsummary.fees_deriv'
                 makerFee={data.derivMakerFee || data.derivMakerRebate || 0}
                 takerFee={data.derivTakerFee || data.derivTakerRebate || 0}
               />
               <PaidFees
                 t={t}
+                isNoData={isNoData}
+                isLoading={isLoading}
                 title='accountsummary.margin_funds'
                 data={get(data, 'fees_funding_30d', {})}
                 total={get(data, 'fees_funding_total_30d', 0)}
@@ -106,29 +115,25 @@ class AccountSummary extends PureComponent {
           <br />
           <PaidFees
             t={t}
+            isNoData={isNoData}
+            isLoading={isLoading}
             title='accountsummary.trading_funds'
             data={get(data, 'fees_trading_30d', {})}
             total={get(data, 'fees_trading_total_30d', 0)}
           />
           <FeeTierVolume
             t={t}
-            data={get(data, 'trade_vol_30d', {})}
+            isNoData={isNoData}
+            isLoading={isLoading}
+            data={get(data, 'trade_vol_30d', [])}
+          />
+          <Leo
+            t={t}
+            data={data}
+            isNoData={isNoData}
+            isLoading={isLoading}
           />
-          <Leo t={t} data={data} />
         </div>
-      )
-    }
-    return (
-      <Card
-        elevation={Elevation.ZERO}
-        className='col-lg-12 col-md-12 col-sm-12 col-xs-12 no-table-scroll'
-      >
-        <SectionHeader
-          filter={false}
-          timeframe={false}
-          title='accountsummary.title'
-        />
-        {showContent}
       </Card>
     )
   }