Improve flashing behaviour for loading gas estimates (on confirm scre…

…en) (MetaMask#11852) * Improve flashing behaviour for loading gas estimates * Fix typo * renderHeartBeatIfInTest
metavisionlabs · Aug 17, 2021 · 805859a · 805859a
1 parent b6086eb
commit 805859a
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 23 deletions.
diff --git a/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss b/ui/components/app/confirm-page-container/confirm-page-container-content/index.scss
@@ -88,4 +88,8 @@
   .page-container__footer {
     margin-top: auto;
   }
+
+  &__currency-container {
+    position: relative;
+  }
 }
diff --git a/ui/components/app/transaction-detail/transaction-detail.component.js b/ui/components/app/transaction-detail/transaction-detail.component.js
@@ -4,14 +4,12 @@ import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
 
 import TransactionDetailItem from '../transaction-detail-item/transaction-detail-item.component';
-import LoadingHeartBeat from '../../ui/loading-heartbeat';
 
 export default function TransactionDetail({ rows = [], onEdit }) {
   const t = useContext(I18nContext);
 
   return (
     <div className="transaction-detail">
-      {process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />}
       {onEdit && (
         <div className="transaction-detail-edit">
           <button onClick={onEdit}>{t('edit')}</button>

diff --git a/ui/components/ui/loading-heartbeat/index.scss b/ui/components/ui/loading-heartbeat/index.scss
@@ -19,9 +19,7 @@
 }
 
 @keyframes heartbeat {
-  0% { opacity: 0; }
-  25% { opacity: 1; }
-  50% { opacity: 0.5; }
-  75% { opacity: 1; }
-  100% { opacity: 0; }
+  0% { opacity: 0.2; }
+  50% { opacity: 1; }
+  100% { opacity: 0.2; }
 }
diff --git a/ui/hooks/useShouldAnimateGasEstimations.js b/ui/hooks/useShouldAnimateGasEstimations.js
@@ -40,7 +40,14 @@ export function useShouldAnimateGasEstimations() {
       showLoadingAnimation === true
     ) {
       dispatch(toggleGasLoadingAnimation(true));
+    }
+  }, [dispatch, isGasLoadingAnimationActive, showLoadingAnimation]);
 
+  useEffect(() => {
+    if (
+      isGasLoadingAnimationActive === true &&
+      showLoadingAnimation === false
+    ) {
       setTimeout(() => {
         dispatch(toggleGasLoadingAnimation(false));
       }, 2000);

diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -33,6 +33,7 @@ import { toBuffer } from '../../../shared/modules/buffer-utils';
 import TransactionDetail from '../../components/app/transaction-detail/transaction-detail.component';
 import TransactionDetailItem from '../../components/app/transaction-detail-item/transaction-detail-item.component';
 import InfoTooltip from '../../components/ui/info-tooltip/info-tooltip';
+import LoadingHeartBeat from '../../components/ui/loading-heartbeat';
 import GasTiming from '../../components/app/gas-timing/gas-timing.component';
 
 import { COLORS } from '../../helpers/constants/design-system';
@@ -43,6 +44,9 @@ import {
   removePollingTokenFromAppState,
 } from '../../store/actions';
 
+const renderHeartBeatIfNotInTest = () =>
+  process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />;
+
 export default class ConfirmTransactionBase extends Component {
   static contextTypes = {
     t: PropTypes.func,
@@ -439,29 +443,41 @@ export default class ConfirmTransactionBase extends Component {
                 txData.dappSuggestedGasFees ? COLORS.SECONDARY1 : COLORS.BLACK
               }
               detailText={
-                <UserPreferencedCurrencyDisplay
-                  type={SECONDARY}
-                  value={hexMinimumTransactionFee}
-                  hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
-                />
+                <div className="confirm-page-container-content__currency-container">
+                  {renderHeartBeatIfNotInTest()}
+                  <UserPreferencedCurrencyDisplay
+                    type={SECONDARY}
+                    value={hexMinimumTransactionFee}
+                    hideLabel={Boolean(useNativeCurrencyAsPrimaryCurrency)}
+                  />
+                </div>
               }
               detailTotal={
-                <UserPreferencedCurrencyDisplay
-                  type={PRIMARY}
-                  value={hexMinimumTransactionFee}
-                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
-                />
+                <div className="confirm-page-container-content__currency-container">
+                  {renderHeartBeatIfNotInTest()}
+                  <UserPreferencedCurrencyDisplay
+                    type={PRIMARY}
+                    value={hexMinimumTransactionFee}
+                    hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                  />
+                </div>
               }
               subText={t('editGasSubTextFee', [
                 <b key="editGasSubTextFeeLabel">
                   {t('editGasSubTextFeeLabel')}
                 </b>,
-                <UserPreferencedCurrencyDisplay
-                  key="editGasSubTextFeeAmount"
-                  type={PRIMARY}
-                  value={hexMaximumTransactionFee}
-                  hideLabel={!useNativeCurrencyAsPrimaryCurrency}
-                />,
+                <div
+                  key="editGasSubTextFeeValue"
+                  className="confirm-page-container-content__currency-container"
+                >
+                  {renderHeartBeatIfNotInTest()}
+                  <UserPreferencedCurrencyDisplay
+                    key="editGasSubTextFeeAmount"
+                    type={PRIMARY}
+                    value={hexMaximumTransactionFee}
+                    hideLabel={!useNativeCurrencyAsPrimaryCurrency}
+                  />
+                </div>,
               ])}
               subTitle={
                 <GasTiming