Increase chart loading speed

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

@@ -73,19 +73,6 @@ $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/app.js

@@ -43,7 +43,6 @@ import './lib/currency'
 import './lib/from_now'
 import './lib/indexing'
 import './lib/loading_element'
-import './lib/market_history_chart'
 import './lib/pending_transactions_toggle'
 import './lib/pretty_json'
 import './lib/reload_button'

apps/block_scout_web/assets/js/chart-loader.js

@@ -0,0 +1,18 @@
+import $ from 'jquery'
+
+import { formatAllUsdValues, updateAllCalculatedUsdValues } from './lib/currency'
+import { createMarketHistoryChart } from './lib/market_history_chart'
+import { createCoinBalanceHistoryChart } from './lib/coin_balance_history_chart'
+
+(function () {
+  const dashboardChartElement = $('[data-chart="marketHistoryChart"]')[0]
+  const coinBalanceHistoryChartElement = $('[data-chart="coinBalanceHistoryChart"]')[0]
+  if (dashboardChartElement) {
+    window.dashboardChart = createMarketHistoryChart(dashboardChartElement)
+  }
+  if (coinBalanceHistoryChartElement) {
+    window.coinBalanceHistoryChart = createCoinBalanceHistoryChart(coinBalanceHistoryChartElement)
+  }
+  formatAllUsdValues()
+  updateAllCalculatedUsdValues()
+})()

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

@@ -80,12 +80,16 @@ function getDataFromLocalStorage (key) {
   return data ? JSON.parse(data) : []
 }
 
+function setDataToLocalStorage (key, data) {
+  window.localStorage.setItem(key, JSON.stringify(data))
+}
+
 function getPriceData (marketHistoryData) {
   if (marketHistoryData.length === 0) {
     return getDataFromLocalStorage('priceData')
   }
   const data = marketHistoryData.map(({ date, closingPrice }) => ({ x: date, y: closingPrice }))
-  window.localStorage.setItem('priceData', JSON.stringify(data))
+  setDataToLocalStorage('priceData', data)
   return data
 }
 
@@ -99,7 +103,7 @@ function getMarketCapData (marketHistoryData, availableSupply) {
       : availableSupply
     return { x: date, y: closingPrice * supply }
   })
-  window.localStorage.setItem('marketCapData', JSON.stringify(data))
+  setDataToLocalStorage('marketCapData', data)
   return data
 }
 
@@ -138,6 +142,15 @@ class MarketHistoryChart {
     }
     this.availableSupply = availableSupply
     config.data.datasets = [this.price, this.marketCap]
+
+    const isChartLoadedKey = 'isChartLoaded'
+    const isChartLoaded = window.sessionStorage.getItem(isChartLoadedKey) === 'true'
+    if (isChartLoaded) {
+      config.options.animation = false
+    } else {
+      window.sessionStorage.setItem(isChartLoadedKey, true)
+    }
+
     this.chart = new Chart(el, config)
   }
 
@@ -156,7 +169,6 @@ class MarketHistoryChart {
 
 export function createMarketHistoryChart (el) {
   const dataPath = el.dataset.market_history_chart_path
-  const $chartLoading = $('[data-chart-loading-message]')
   const $chartError = $('[data-chart-error-message]')
   const chart = new MarketHistoryChart(el, 0, [])
   $(el).show()
@@ -171,15 +183,10 @@ export function createMarketHistoryChart (el) {
       $(el).hide()
       $chartError.show()
     })
-    .always(() => {
-      $chartLoading.css({ opacity: 0 })
-      setTimeout($chartLoading.hide, 1000)
-    })
   return chart
 }
 
 $('[data-chart-error-message]').on('click', _event => {
-  $('[data-chart-loading-message]').show()
   $('[data-chart-error-message]').hide()
   createMarketHistoryChart($('[data-chart="marketHistoryChart"]')[0])
 })

apps/block_scout_web/assets/js/lib/modals.js

@@ -1,5 +1,4 @@
 import $ from 'jquery'
-import Chart from 'chart.js'
 
 $(function () {
   $('.js-become-candidate').on('click', function () {
@@ -43,34 +42,34 @@ $(function () {
   })
 
   function setupStakesProgress (progress, total, modal) {
-    const stakeProgress = $(`${modal} .js-stakes-progress`)
-    const primaryColor = $('.btn-full-primary').css('background-color')
-    const backgroundColors = [
-      primaryColor,
-      'rgba(202, 199, 226, 0.5)'
-    ]
-    const progressBackground = total - progress
+    // const stakeProgress = $(`${modal} .js-stakes-progress`)
+    // const primaryColor = $('.btn-full-primary').css('background-color')
+    // const backgroundColors = [
+    //   primaryColor,
+    //   'rgba(202, 199, 226, 0.5)'
+    // ]
+    // const progressBackground = total - progress
 
-    // eslint-disable-next-line no-unused-vars
-    const myChart = new Chart(stakeProgress, {
-      type: 'doughnut',
-      data: {
-        datasets: [{
-          data: [progress, progressBackground],
-          backgroundColor: backgroundColors,
-          hoverBackgroundColor: backgroundColors,
-          borderWidth: 0
-        }]
-      },
-      options: {
-        cutoutPercentage: 80,
-        legend: {
-          display: false
-        },
-        tooltips: {
-          enabled: false
-        }
-      }
-    })
+    // // eslint-disable-next-line no-unused-vars
+    // const myChart = new window.Chart(stakeProgress, {
+    //   type: 'doughnut',
+    //   data: {
+    //     datasets: [{
+    //       data: [progress, progressBackground],
+    //       backgroundColor: backgroundColors,
+    //       hoverBackgroundColor: backgroundColors,
+    //       borderWidth: 0
+    //     }]
+    //   },
+    //   options: {
+    //     cutoutPercentage: 80,
+    //     legend: {
+    //       display: false
+    //     },
+    //     tooltips: {
+    //       enabled: false
+    //     }
+    //   }
+    // })
   }
 })

apps/block_scout_web/assets/js/pages/address/coin_balances.js

@@ -4,7 +4,6 @@ import humps from 'humps'
 import socket from '../../socket'
 import { connectElements } from '../../lib/redux_helpers.js'
 import { createAsyncLoadStore } from '../../lib/async_listing_load'
-import { createCoinBalanceHistoryChart } from '../../lib/coin_balance_history_chart'
 
 export const initialState = {
   channelDisconnected: false
@@ -61,9 +60,4 @@ if ($('[data-page="coin-balance-history"]').length) {
       msg: humps.camelizeKeys(msg)
     })
   })
-
-  const chartContainer = $('[data-chart="coinBalanceHistoryChart"]')[0]
-  if (chartContainer) {
-    createCoinBalanceHistoryChart(chartContainer)
-  }
 }

apps/block_scout_web/assets/js/pages/chain.js

@@ -11,7 +11,6 @@ import { exchangeRateChannel, formatUsdValue } from '../lib/currency'
 import { createStore, connectElements } from '../lib/redux_helpers.js'
 import { batchChannel, showLoader } from '../lib/utils'
 import listMorph from '../lib/list_morph'
-import { createMarketHistoryChart } from '../lib/market_history_chart'
 
 const BATCH_THRESHOLD = 6
 
@@ -142,8 +141,8 @@ function withMissingBlocks (reducer) {
 let chart
 const elements = {
   '[data-chart="marketHistoryChart"]': {
-    load ($el) {
-      chart = createMarketHistoryChart($el[0])
+    load () {
+      chart = window.dashboardChart
     },
     render ($el, state, oldState) {
       if (!chart || (oldState.availableSupply === state.availableSupply && oldState.marketHistoryData === state.marketHistoryData) || !state.availableSupply) return

apps/block_scout_web/assets/webpack.config.js

@@ -75,6 +75,7 @@ const appJs =
     entry: {
       app: './js/app.js',
       stakes: './js/pages/stakes.js',
+      'chart-loader': './js/chart-loader.js',
       'non-critical': './css/non-critical.scss'
     },
     output: {

apps/block_scout_web/lib/block_scout_web/templates/address_coin_balance/index.html.eex

@@ -1,4 +1,6 @@
 <section class="container" data-page="coin-balance-history">
+  <script defer src="<%= static_path(@conn, "/js/chart-loader.js") %>"></script>
+
   <%= render BlockScoutWeb.AddressView, "overview.html", assigns %>
 
   <section>

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

@@ -5,13 +5,6 @@
       <div class="dashboard-banner-network-graph">
         <!-- Graph -->
         <div class="dashboard-banner-chart">
-          <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>
-            </span>
-            <%= gettext("Loading chart") %>...
-          </div>
           <button data-chart-error-message class="alert alert-danger col-12 text-left mt-5" style="display: none;">
             <span><%= gettext("There was a problem loading the chart.") %></span>
           </button>
@@ -79,6 +72,7 @@
       </div>
     </div>
   </div>
+  <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/chart-loader.js") %>"></script>
 </div>
 <section class="container">
   <div class="card card-chain-blocks">

apps/block_scout_web/lib/block_scout_web/templates/layout/app.html.eex

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
     <link rel="preload" href="<%= static_path(@conn, "/css/non-critical.css") %>" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <noscript><link rel="stylesheet" href="<%= static_path(@conn, "/css/non-critical.css") %>"></noscript>
@@ -19,6 +20,18 @@
     <meta name="theme-color" content="#ffffff">
 
     <%= render_existing(@view_module, "_metatags.html", assigns) || render("_default_title.html") %>
+
+    <script defer data-cfasync="false">
+      window.localized = {
+        'Blocks Indexed': '<%= gettext("Blocks Indexed") %>',
+        'Block Processing': '<%= gettext("Block Mined, awaiting import...") %>',
+        'Indexing Tokens': '<%= gettext("Indexing Tokens") %>',
+        'Less than': '<%= gettext("Less than") %>',
+        'Market Cap': '<%= gettext("Market Cap") %>',
+        'Price': '<%= gettext("Price") %>',
+        'Ether': '<%= gettext("Ether") %>'
+      }
+    </script>
   </head>
 
   <body>
@@ -51,18 +64,7 @@
       </main>
       <%= render BlockScoutWeb.LayoutView, "_footer.html", assigns %>
     </div>
-    <script>
-      window.localized = {
-        'Blocks Indexed': '<%= gettext("Blocks Indexed") %>',
-        'Block Processing': '<%= gettext("Block Mined, awaiting import...") %>',
-        'Indexing Tokens': '<%= gettext("Indexing Tokens") %>',
-        'Less than': '<%= gettext("Less than") %>',
-        'Market Cap': '<%= gettext("Market Cap") %>',
-        'Price': '<%= gettext("Price") %>',
-        'Ether': '<%= gettext("Ether") %>'
-      }
-    </script>
-    <script src="<%= static_path(@conn, "/js/app.js") %>"></script>
+    <script defer data-cfasync="false" src="<%= static_path(@conn, "/js/app.js") %>"></script>
     <%= render_existing(@view_module, "scripts.html", assigns) %>
   </body>
 </html>