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

2 files changed, 22 insertions, 5 deletions

diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
index 4483b71df..264d038da 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/basic-tab-content.component.js
+++ b/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
-          className="gas-price-button-group--alt"
-          showCheck={true}
-          {...this.props.gasPriceButtonGroupProps}
-        />
+        {!gasPriceButtonGroupProps.loading
+            ? <GasPriceButtonGroup
+              className="gas-price-button-group--alt"
+              showCheck={true}
+              {...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>
     )
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js b/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
index 0c9c6ac63..25abdd997 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/basic-tab-content/tests/basic-tab-content-component.test.js
+++ b/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)
+    })
   })
 })