2 files changed, 24 insertions, 1 deletions
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
index 23945483d..ac68b833c 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/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>
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
index 0c25874bb..f321ca696 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js
+++ b/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