Merge pull request #2876 from poanetwork/fix-chart-loading

Improve displaying of chart loading

apps/block_scout_web/assets/css/components/_dashboard-banner.scss

@@ -53,14 +53,16 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
 
 .dashboard-banner-chart {
   flex-grow: 1;
-  margin: 0 0 35px 0;
+  margin: 15px 0 20px 0;
   max-width: 350px;
   position: relative;
+  min-height: 100px;
+  height: calc(100% - 86px);
 
   @include media-breakpoint-down(md) {
     flex-grow: 0;
-    margin-bottom: 20px;
-    margin-top: auto;
+    margin-top: 20px;
+    margin-bottom: auto;
     max-width: 100%;
   }
 
@@ -71,6 +73,19 @@ $dashboard-banner-chart-axis-font-color: $dashboard-stats-item-value-color !defa
   }
 }
 
+.dashboard-banner-chart-loader {
+  opacity: 0.5;
+  position: absolute;
+  width: calc(100% - 100px);
+  top: 50%;
+  transform: translateY(-75%);
+  left: 50px;
+  right: 50px;
+  transition: opacity .25s ease-in-out;
+  -moz-transition: opacity .25s ease-in-out;
+  -webkit-transition: opacity .25s ease-in-out;
+}
+
 .dashboard-banner-chart-legend {
   display: grid;
   grid-template-columns: 1fr 1fr;

apps/block_scout_web/assets/js/lib/market_history_chart.js

@@ -4,7 +4,6 @@ import humps from 'humps'
 import numeral from 'numeral'
 import { formatUsdValue } from '../lib/currency'
 import sassVariables from '../../css/app.scss'
-import { showLoader } from '../lib/utils'
 
 const config = {
   type: 'line',
@@ -76,16 +75,32 @@ const config = {
   }
 }
 
+function getDataFromLocalStorage (key) {
+  const data = window.localStorage.getItem(key)
+  return data ? JSON.parse(data) : []
+}
+
 function getPriceData (marketHistoryData) {
-  return marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice }))
+  if (marketHistoryData.length === 0) {
+    return getDataFromLocalStorage('priceData')
+  }
+  const data = marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice }))
+  window.localStorage.setItem('priceData', JSON.stringify(data))
+  return data
 }
 
 function getMarketCapData (marketHistoryData, availableSupply) {
-  if (availableSupply !== null && typeof availableSupply === 'object') {
-    return marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice * availableSupply[date] }))
-  } else {
-    return marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice * availableSupply }))
+  if (marketHistoryData.length === 0) {
+    return getDataFromLocalStorage('marketCapData')
   }
+  const data = marketHistoryData.map(({ date, closingPrice }) => {
+    const supply = (availableSupply !== null && typeof availableSupply === 'object')
+      ? availableSupply[date]
+      : availableSupply
+    return { x: date, y: closingPrice * supply }
+  })
+  window.localStorage.setItem('marketCapData', JSON.stringify(data))
+  return data
 }
 
 // colors for light and dark theme
@@ -142,25 +157,23 @@ class MarketHistoryChart {
 export function createMarketHistoryChart (el) {
   const dataPath = el.dataset.market_history_chart_path
   const $chartLoading = $('[data-chart-loading-message]')
-
-  const isTimeout = true
-  const timeoutID = showLoader(isTimeout, $chartLoading)
-
   const $chartError = $('[data-chart-error-message]')
   const chart = new MarketHistoryChart(el, 0, [])
+  $(el).show()
+
   $.getJSON(dataPath, { type: 'JSON' })
     .done(data => {
       const availableSupply = JSON.parse(data.supply_data)
       const marketHistoryData = humps.camelizeKeys(JSON.parse(data.history_data))
-      $(el).show()
       chart.update(availableSupply, marketHistoryData)
     })
     .fail(() => {
+      $(el).hide()
       $chartError.show()
     })
     .always(() => {
-      $chartLoading.hide()
-      clearTimeout(timeoutID)
+      $chartLoading.css({ opacity: 0 })
+      setTimeout($chartLoading.hide, 1000)
     })
   return chart
 }

apps/block_scout_web/lib/block_scout_web/templates/chain/show.html.eex

@@ -5,7 +5,7 @@
       <div class="dashboard-banner-network-graph">
         <!-- Graph -->
         <div class="dashboard-banner-chart">
-          <div hidden data-chart-loading-message class="tile tile-muted text-center mt-5">
+          <div data-chart-loading-message class="tile tile-muted text-center dashboard-banner-chart-loader">
             <span class="loading-spinner-small mr-2">
               <span class="loading-spinner-block-1"></span>
               <span class="loading-spinner-block-2"></span>