Add loading spinners when waiting for APIs in the gas customization modal

ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import Loading from '../../../loading-screen'
 import GasPriceChart from '../../gas-price-chart'
 
 export default class AdvancedTabContent extends Component {
@@ -13,6 +14,7 @@ export default class AdvancedTabContent extends Component {
     updateCustomGasLimit: PropTypes.func,
     customGasPrice: PropTypes.number,
     customGasLimit: PropTypes.number,
+    gasEstimatesLoading: PropTypes.bool,
     millisecondsRemaining: PropTypes.number,
     totalFee: PropTypes.string,
     timeRemaining: PropTypes.string,
@@ -98,6 +100,7 @@ export default class AdvancedTabContent extends Component {
       insufficientBalance,
       totalFee,
       gasChartProps,
+      gasEstimatesLoading,
     } = this.props
 
     return (
@@ -112,7 +115,10 @@ export default class AdvancedTabContent extends Component {
               insufficientBalance
           ) }
           <div className="advanced-tab__fee-chart__title">Live Gas Price Predictions</div>
-          <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
+          {!gasEstimatesLoading
+            ? <GasPriceChart {...gasChartProps} updateCustomGasPrice={updateCustomGasPrice} />
+            : <Loading />
+          }
           <div className="advanced-tab__fee-chart__speed-buttons">
             <span>Slower</span>
             <span>Faster</span>

ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js

@@ -5,6 +5,7 @@ import sinon from 'sinon'
 import AdvancedTabContent from '../advanced-tab-content.component.js'
 
 import GasPriceChart from '../../../gas-price-chart'
+import Loading from '../../../../loading-screen'
 
 const propsMethodSpies = {
   updateCustomGasPrice: sinon.spy(),
@@ -60,6 +61,22 @@ describe('AdvancedTabContent Component', function () {
       assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
     })
 
+    it('should render a loading component instead of the chart if gasEstimatesLoading is true', () => {
+      wrapper.setProps({ gasEstimatesLoading: true })
+      const advancedTabChildren = wrapper.children()
+      assert.equal(advancedTabChildren.length, 2)
+
+      assert(advancedTabChildren.at(0).hasClass('advanced-tab__transaction-data-summary'))
+      assert(advancedTabChildren.at(1).hasClass('advanced-tab__fee-chart'))
+
+      const feeChartDiv = advancedTabChildren.at(1)
+
+      assert(feeChartDiv.childAt(0).hasClass('advanced-tab__gas-edit-rows'))
+      assert(feeChartDiv.childAt(1).hasClass('advanced-tab__fee-chart__title'))
+      assert(feeChartDiv.childAt(2).is(Loading))
+      assert(feeChartDiv.childAt(3).hasClass('advanced-tab__fee-chart__speed-buttons'))
+    })
+
     it('should call renderDataSummary with the expected params', () => {
       assert.equal(AdvancedTabContent.prototype.renderGasEditRows.callCount, 1)
       const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall(0).args

ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import Loading from '../../../loading-screen'
 import GasPriceButtonGroup from '../../gas-price-button-group'
 
 export default class BasicTabContent extends Component {
@@ -12,15 +13,20 @@ export default class BasicTabContent extends Component {
   }
 
   render () {
+    const { gasPriceButtonGroupProps } = this.props
+
     return (
       <div className="basic-tab-content">
         <div className="basic-tab-content__title">Estimated Processing Times</div>
         <div className="basic-tab-content__blurb">Select a higher gas fee to accelerate the processing of your transaction.*</div>
-        <GasPriceButtonGroup
+        {!gasPriceButtonGroupProps.loading
+            ? <GasPriceButtonGroup
               className="gas-price-button-group--alt"
               showCheck={true}
-          {...this.props.gasPriceButtonGroupProps}
+              {...gasPriceButtonGroupProps}
             />
+            : <Loading />
+        }
         <div className="basic-tab-content__footer-blurb">* Accelerating a transaction by using a higher gas price increases its chances of getting processed by the network faster, but it is not always guaranteed.</div>
       </div>
     )

ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js

@@ -4,6 +4,7 @@ import { shallow } from 'enzyme'
 import BasicTabContent from '../basic-tab-content.component'
 
 import GasPriceButtonGroup from '../../../gas-price-button-group/'
+import Loading from '../../../../loading-screen'
 
 const mockGasPriceButtonGroupProps = {
   buttonDataLoading: false,
@@ -60,6 +61,7 @@ describe('BasicTabContent Component', function () {
         noButtonActiveByDefault,
         showCheck,
       } = wrapper.find(GasPriceButtonGroup).props()
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 1)
       assert.equal(buttonDataLoading, mockGasPriceButtonGroupProps.buttonDataLoading)
       assert.equal(className, mockGasPriceButtonGroupProps.className)
       assert.equal(noButtonActiveByDefault, mockGasPriceButtonGroupProps.noButtonActiveByDefault)
@@ -67,5 +69,14 @@ describe('BasicTabContent Component', function () {
       assert.deepEqual(gasButtonInfo, mockGasPriceButtonGroupProps.gasButtonInfo)
       assert.equal(JSON.stringify(handleGasPriceSelection), JSON.stringify(mockGasPriceButtonGroupProps.handleGasPriceSelection))
     })
+
+    it('should render a loading component instead of the GasPriceButtonGroup if gasPriceButtonGroupProps.loading is true', () => {
+      wrapper.setProps({
+        gasPriceButtonGroupProps: { ...mockGasPriceButtonGroupProps, loading: true },
+      })
+
+      assert.equal(wrapper.find(GasPriceButtonGroup).length, 0)
+      assert.equal(wrapper.find(Loading).length, 1)
+    })
   })
 })

ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -68,6 +68,7 @@ export default class GasModalPageContainer extends Component {
     gasChartProps,
     currentTimeEstimate,
     insufficientBalance,
+    gasEstimatesLoading,
   }) {
     const { transactionFee } = this.props
     return (
@@ -81,6 +82,7 @@ export default class GasModalPageContainer extends Component {
         totalFee={newTotalFiat}
         gasChartProps={gasChartProps}
         insufficientBalance={insufficientBalance}
+        gasEstimatesLoading={gasEstimatesLoading}
       />
     )
   }

ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js

@@ -32,6 +32,7 @@ import {
   formatTimeEstimate,
   getFastPriceEstimateInHexWEI,
   getBasicGasEstimateLoadingStatus,
+  getGasEstimatesLoadingStatus,
   getCustomGasLimit,
   getCustomGasPrice,
   getDefaultActiveButtonIndex,
@@ -65,6 +66,8 @@ import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price
 const mapStateToProps = (state, ownProps) => {
   const { transaction = {} } = ownProps
   const buttonDataLoading = getBasicGasEstimateLoadingStatus(state)
+  const gasEstimatesLoading = getGasEstimatesLoadingStatus(state)
+
   const { gasPrice: currentGasPrice, gas: currentGasLimit, value } = getTxParams(state, transaction.id)
   const customModalGasPriceInHex = getCustomGasPrice(state) || currentGasPrice
   const customModalGasLimitInHex = getCustomGasLimit(state) || currentGasLimit
@@ -127,6 +130,7 @@ const mapStateToProps = (state, ownProps) => {
     isSpeedUp: transaction.status === 'submitted',
     txId: transaction.id,
     insufficientBalance,
+    gasEstimatesLoading,
   }
 }
 

ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js

@@ -232,6 +232,7 @@ describe('GasModalPageContainer Component', function () {
         customGasLimit: 456,
         newTotalFiat: '$0.30',
         currentTimeEstimate: '1 min 31 sec',
+        gasEstimatesLoading: 'mockGasEstimatesLoading',
       })
       const advancedTabContentProps = renderAdvancedTabContentResult.props
       assert.equal(advancedTabContentProps.updateCustomGasPrice(), 'mockConvertThenUpdateCustomGasPrice')
@@ -240,6 +241,7 @@ describe('GasModalPageContainer Component', function () {
       assert.equal(advancedTabContentProps.customGasLimit, 456)
       assert.equal(advancedTabContentProps.timeRemaining, '1 min 31 sec')
       assert.equal(advancedTabContentProps.totalFee, '$0.30')
+      assert.equal(advancedTabContentProps.gasEstimatesLoading, 'mockGasEstimatesLoading')
     })
   })
 

ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js

@@ -80,6 +80,7 @@ describe('gas-modal-page-container container', () => {
             limit: 'aaaaaaaa',
             price: 'ffffffff',
           },
+          gasEstimatesLoading: false,
           priceAndTimeEstimates: [
             { gasprice: 3, expectedTime: '31' },
             { gasprice: 4, expectedTime: '62' },
@@ -118,6 +119,7 @@ describe('gas-modal-page-container container', () => {
           defaultActiveButtonIndex: 'mockRenderableBasicEstimateData:4ffffffff',
           gasButtonInfo: 'mockRenderableBasicEstimateData:4',
         },
+        gasEstimatesLoading: false,
         hideBasic: true,
         infoRowProps: {
           originalTotalFiat: '637.41',

ui/app/selectors/custom-gas.js

@@ -33,6 +33,7 @@ const selectors = {
   getDefaultActiveButtonIndex,
   getEstimatedGasPrices,
   getEstimatedGasTimes,
+  getGasEstimatesLoadingStatus,
   getPriceAndTimeEstimates,
   getRenderableBasicEstimateData,
   getRenderableEstimateDataForSmallButtonsFromGWEI,
@@ -63,6 +64,10 @@ function getBasicGasEstimateLoadingStatus (state) {
   return state.gas.basicEstimateIsLoading
 }
 
+function getGasEstimatesLoadingStatus (state) {
+  return state.gas.gasEstimatesLoading
+}
+
 function getPriceAndTimeEstimates (state) {
   return state.gas.priceAndTimeEstimates
 }