Ensure native asset icon does not display incorrectly when switching networks and balance is loading (#15116)

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

ui/components/app/wallet-overview/eth-overview.js

@@ -52,6 +52,7 @@ const EthOverview = ({ className }) => {
 
   return (
     <WalletOverview
+      loading={!balance}
       balance={
         <Tooltip
           position="top"

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 = {