2 files changed, 28 insertions, 3 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index b372326ee..0e7c564a8 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -908,5 +908,8 @@
   },
   "youSign": {
     "message": "You are signing"
+  },
+  "estimatingTransaction": {
+    "message": "Estimating transaction cost…"
   }
 }
diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js
index acdd99364..dc496a8d8 100644
--- a/ui/app/components/pending-tx/index.js
+++ b/ui/app/components/pending-tx/index.js
@@ -1,6 +1,7 @@
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const PropTypes = require('prop-types')
 const clone = require('clone')
 const abi = require('human-standard-token-abi')
 const abiDecoder = require('abi-decoder')
@@ -11,6 +12,7 @@ const util = require('../../util')
 const ConfirmSendEther = require('./confirm-send-ether')
 const ConfirmSendToken = require('./confirm-send-token')
 const ConfirmDeployContract = require('./confirm-deploy-contract')
+const Loading = require('../loading')
 
 const TX_TYPES = {
   DEPLOY_CONTRACT: 'deploy_contract',
@@ -53,10 +55,24 @@ function PendingTx () {
   }
 }
 
-PendingTx.prototype.componentWillMount = async function () {
+PendingTx.prototype.componentDidMount = function () {
+  this.setTokenData()
+}
+
+PendingTx.prototype.componentDidUpdate = function (prevProps, prevState) {
+  if (prevState.isFetching) {
+    this.setTokenData()
+  }
+}
+
+PendingTx.prototype.setTokenData = async function () {
   const txMeta = this.gatherTxMeta()
   const txParams = txMeta.txParams || {}
 
+  if (txMeta.loadingDefaults) {
+    return
+  }
+
   if (!txParams.to) {
     return this.setState({
       transactionType: TX_TYPES.DEPLOY_CONTRACT,
@@ -125,7 +141,9 @@ PendingTx.prototype.render = function () {
   const { sendTransaction } = this.props
 
   if (isFetching) {
-    return h('noscript')
+    return h(Loading, {
+      loadingMessage: this.context.t('estimatingTransaction'),
+    })
   }
 
   switch (transactionType) {
@@ -150,6 +168,10 @@ PendingTx.prototype.render = function () {
         sendTransaction,
       })
     default:
-      return h('noscript')
+      return h(Loading)
   }
 }
+
+PendingTx.contextTypes = {
+  t: PropTypes.func,
+}