WT-1948 fix: Only show loading shimmer once balance API request start…

…ed (#1359)
immutable · Jan 18, 2024 · f69d346 · f69d346
1 parent bf052ad
commit f69d346
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 25 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.tsx
@@ -201,7 +201,7 @@ export function WalletWidget(props: WalletWidgetInputs) {
             <LoadingView loadingText={loadingText} />
           )}
           {viewState.view.type === WalletWidgetViews.WALLET_BALANCES && (
-            <WalletBalances balancesLoading={balancesLoading} setBalancesLoading={setBalancesLoading} />
+            <WalletBalances balancesLoading={balancesLoading} />
           )}
           {viewState.view.type === WalletWidgetViews.SETTINGS && <Settings />}
           {viewState.view.type === WalletWidgetViews.COIN_INFO && (

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx
@@ -50,7 +50,7 @@ describe('Network Menu', () => {
         <ConnectLoaderTestComponent
           initialStateOverride={connectLoaderState}
         >
-          <NetworkMenu setBalancesLoading={() => {}} />
+          <NetworkMenu />
         </ConnectLoaderTestComponent>
       </ViewContextTestComponent>,
     );
@@ -75,7 +75,7 @@ describe('Network Menu', () => {
           <WalletContext.Provider
             value={{ walletState, walletDispatch: () => {} }}
           >
-            <NetworkMenu setBalancesLoading={() => {}} />
+            <NetworkMenu />
           </WalletContext.Provider>
         </ConnectLoaderTestComponent>
       </ViewContextTestComponent>,
@@ -119,7 +119,7 @@ describe('Network Menu', () => {
           <WalletContext.Provider
             value={{ walletState, walletDispatch: () => {} }}
           >
-            <NetworkMenu setBalancesLoading={() => {}} />
+            <NetworkMenu />
           </WalletContext.Provider>
         </ConnectLoaderTestComponent>
       </ViewContextTestComponent>,

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.tsx
@@ -34,11 +34,7 @@ import {
 import { EventTargetContext } from '../../../../context/event-target-context/EventTargetContext';
 import { UserJourney, useAnalytics } from '../../../../context/analytics-provider/SegmentAnalyticsProvider';
 
-export interface NetworkMenuProps {
-  setBalancesLoading: (loading: boolean) => void;
-}
-
-export function NetworkMenu({ setBalancesLoading }: NetworkMenuProps) {
+export function NetworkMenu() {
   const { t } = useTranslation();
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
@@ -65,16 +61,13 @@ export function NetworkMenu({ setBalancesLoading }: NetworkMenuProps) {
       });
 
       try {
-        setBalancesLoading(true);
-
         const switchNetworkResult = await checkout.switchNetwork({
           provider,
           chainId,
         } as SwitchNetworkParams);
 
         sendNetworkSwitchEvent(eventTarget, switchNetworkResult.provider, switchNetworkResult.network);
       } catch (err: any) {
-        setBalancesLoading(false);
         if (err.type === CheckoutErrorType.USER_REJECTED_REQUEST_ERROR) {
           // ignore error
         } else {

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx
@@ -103,7 +103,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -123,7 +123,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -145,7 +145,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -167,7 +167,7 @@ describe('WalletBalances', () => {
               initialStateOverride={{ ...baseWalletState, tokenBalances: [] }}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -225,7 +225,7 @@ describe('WalletBalances', () => {
               initialStateOverride={baseWalletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -287,7 +287,7 @@ describe('WalletBalances', () => {
               initialStateOverride={walletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -348,7 +348,7 @@ describe('WalletBalances', () => {
               initialStateOverride={walletState}
               cryptoConversionsOverride={cryptoConversions}
             >
-              <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+              <WalletBalances balancesLoading={false} />
             </WalletWidgetTestComponent>
           </ConnectLoaderTestComponent>
         </ViewContextTestComponent>,
@@ -417,7 +417,7 @@ describe('WalletBalances', () => {
                 <WalletContext.Provider
                   value={{ walletState: testWalletState, walletDispatch: () => {} }}
                 >
-                  <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+                  <WalletBalances balancesLoading={false} />
                 </WalletContext.Provider>
               </ConnectLoaderTestComponent>
             </ViewContextTestComponent>
@@ -445,7 +445,7 @@ describe('WalletBalances', () => {
               <WalletContext.Provider
                 value={{ walletState: testWalletState, walletDispatch: () => {} }}
               >
-                <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+                <WalletBalances balancesLoading={false} />
               </WalletContext.Provider>
             </ConnectLoaderTestComponent>
           </ViewContextTestComponent>
@@ -479,7 +479,7 @@ describe('WalletBalances', () => {
               <WalletContext.Provider
                 value={{ walletState, walletDispatch: () => {} }}
               >
-                <WalletBalances balancesLoading={false} setBalancesLoading={() => {}} />
+                <WalletBalances balancesLoading={false} />
               </WalletContext.Provider>
             </ConnectLoaderTestComponent>
           </ViewContextTestComponent>

diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.tsx
@@ -45,11 +45,9 @@ import { BalanceInfo, mapTokenBalancesWithConversions } from '../functions/token
 
 type WalletBalancesProps = {
   balancesLoading: boolean;
-  setBalancesLoading: (balances: boolean) => void;
 };
 export function WalletBalances({
   balancesLoading,
-  setBalancesLoading,
 }: WalletBalancesProps) {
   const { t } = useTranslation();
   const { connectLoaderState } = useContext(ConnectLoaderContext);
@@ -236,7 +234,7 @@ export function WalletBalances({
         sx={walletBalanceOuterContainerStyles}
       >
         <Box sx={walletBalanceContainerStyles}>
-          {showNetworkMenu && <NetworkMenu setBalancesLoading={setBalancesLoading} />}
+          {showNetworkMenu && <NetworkMenu />}
           <TotalTokenBalance totalBalance={totalFiatAmount} loading={balancesLoading} />
           <Box
             sx={walletBalanceListContainerStyles(showNetworkMenu, showAddCoins)}