From c5b3daa35bb6003af59e3fbd4f38337a2abecec9 Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Fri, 1 Jul 2022 10:38:42 -0230
Subject: [PATCH] Ensure native asset icon does not display incorrectly when
 switching networks and balance is loading (#15116)

---
 ui/components/app/asset-list/asset-list.js           | 4 +++-
 ui/components/app/wallet-overview/eth-overview.js    | 1 +
 ui/components/app/wallet-overview/wallet-overview.js | 6 ++++--
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js
index da0209e8d..08f8c6169 100644
--- a/ui/components/app/asset-list/asset-list.js
+++ b/ui/components/app/asset-list/asset-list.js
@@ -37,6 +37,8 @@ const AssetList = ({ onClickAsset }) => {
   const nativeCurrency = useSelector(getNativeCurrency);
   const showFiat = useSelector(getShouldShowFiat);
   const trackEvent = useContext(MetaMetricsContext);
+  const balance = useSelector(getSelectedAccountCachedBalance);
+  const balanceIsLoading = !balance;
 
   const {
     currency: primaryCurrency,
@@ -76,7 +78,7 @@ const AssetList = ({ onClickAsset }) => {
         }
         tokenSymbol={primaryCurrencyProperties.suffix}
         secondary={showFiat ? secondaryCurrencyDisplay : undefined}
-        tokenImage={primaryTokenImage}
+        tokenImage={balanceIsLoading ? null : primaryTokenImage}
         identiconBorder
       />
       <TokenList
diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js
index b560c435b..4b9e22a41 100644
--- a/ui/components/app/wallet-overview/eth-overview.js
+++ b/ui/components/app/wallet-overview/eth-overview.js
@@ -52,6 +52,7 @@ const EthOverview = ({ className }) => {
 
   return (
     <WalletOverview
+      loading={!balance}
       balance={
         <Tooltip
           position="top"
diff --git a/ui/components/app/wallet-overview/wallet-overview.js b/ui/components/app/wallet-overview/wallet-overview.js
index 6f5d1341d..b15a46242 100644
--- a/ui/components/app/wallet-overview/wallet-overview.js
+++ b/ui/components/app/wallet-overview/wallet-overview.js
@@ -2,11 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const WalletOverview = ({ balance, buttons, className, icon }) => {
+const WalletOverview = ({ balance, buttons, className, icon, loading }) => {
+  console.log('balance1', balance);
   return (
     <div className={classnames('wallet-overview', className)}>
       <div className="wallet-overview__balance">
-        {icon}
+        {loading ? null : icon}
         {balance}
       </div>
       <div className="wallet-overview__buttons">{buttons}</div>
@@ -19,6 +20,7 @@ WalletOverview.propTypes = {
   buttons: PropTypes.element.isRequired,
   className: PropTypes.string,
   icon: PropTypes.element.isRequired,
+  loading: PropTypes.boolean,
 };
 
 WalletOverview.defaultProps = {