[WALL-3735] loaders review (#14851)

* feat: improved balance loader * feat: fixed add wallet carousel loaders * feat: fixed account switching loader * feat: esling cleanup
binary-com · May 10, 2024 · 3bf1dad · 3bf1dad
1 parent 8b079e2
commit 3bf1dad
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 18 deletions.
diff --git a/packages/api-v2/src/AuthProvider.tsx b/packages/api-v2/src/AuthProvider.tsx
@@ -17,6 +17,8 @@ type AuthContextType = {
     refetch: () => void;
     isFetching: boolean;
     error: unknown;
+    isSwitching: boolean;
+    isInitializing: boolean;
 };
 
 type LoginToken = {
@@ -98,6 +100,8 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
     const { queryClient, setOnReconnected, setOnConnected } = useAPIContext();
 
     const [isLoading, setIsLoading] = useState(true);
+    const [isSwitching, setIsSwitching] = useState(false);
+    const [isInitializing, setIsInitializing] = useState(true);
     const [isSuccess, setIsSuccess] = useState(false);
     const [isError, setIsError] = useState(false);
     const [isFetching, setIsFetching] = useState(false);
@@ -138,6 +142,7 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
 
     function initialize() {
         setIsLoading(true);
+        setIsInitializing(true);
         setIsSuccess(false);
 
         const { promise, cleanup } = waitForLoginAndTokenWithTimeout(cookieTimeout, loginIDKey, selectDefaultAccount);
@@ -147,26 +152,31 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
         promise
             .then(async ({ token }) => {
                 setIsLoading(true);
+                setIsInitializing(true);
                 setIsFetching(true);
                 await mutateAsync({ payload: { authorize: token || '' } })
                     .then(res => {
                         processAuthorizeResponse(res);
                         setIsLoading(false);
+                        setIsInitializing(false);
                         setIsSuccess(true);
                         setLoginid(res?.authorize?.loginid ?? '');
                     })
                     .catch(() => {
                         setIsLoading(false);
+                        setIsInitializing(false);
                         setIsError(true);
                     })
                     .finally(() => {
                         setIsLoading(false);
+                        setIsInitializing(false);
                         setIsFetching(false);
                     });
             })
             .catch(() => {
                 if (isMounted) {
                     setIsLoading(false);
+                    setIsInitializing(false);
                     setIsError(true);
                 }
             });
@@ -185,12 +195,14 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
             queryClient.cancelQueries();
 
             setIsLoading(true);
+            setIsSwitching(true);
 
             const authorizeResponse = await mutateAsync({ payload: { authorize: getToken(newLoginId) ?? '' } });
             setLoginid(newLoginId);
             processAuthorizeResponse(authorizeResponse);
 
             setIsLoading(false);
+            setIsSwitching(false);
         },
         [loginid, mutateAsync, processAuthorizeResponse, queryClient]
     );
@@ -210,6 +222,8 @@ const AuthProvider = ({ loginIDKey, children, cookieTimeout, selectDefaultAccoun
             isSuccess: isSuccess && !isLoading,
             error: isError,
             loginid,
+            isSwitching,
+            isInitializing,
         };
     }, [data, switchAccount, refetch, isLoading, isError, isFetching, isSuccess, loginid]);
 

diff --git a/packages/api-v2/src/hooks/useAuthorize.ts b/packages/api-v2/src/hooks/useAuthorize.ts
@@ -7,7 +7,19 @@ import { getAccountListWithAuthToken } from '@deriv/utils';
  */
 const useAuthorize = () => {
     const ctx = useAuthContext();
-    const { data, switchAccount, isLoading, isSuccess, isFetching, isError, refetch, error, loginid } = ctx;
+    const {
+        data,
+        switchAccount,
+        isLoading,
+        isSuccess,
+        isFetching,
+        isError,
+        refetch,
+        error,
+        loginid,
+        isSwitching,
+        isInitializing,
+    } = ctx;
 
     const modifiedData = useMemo(() => {
         return { ...data?.authorize, account_list: getAccountListWithAuthToken(data?.authorize?.account_list) };
@@ -26,6 +38,8 @@ const useAuthorize = () => {
             refetch,
             error,
             loginid,
+            isSwitching,
+            isInitializing,
         };
     }, [modifiedData, switchAccount, isLoading, isSuccess, isFetching, isError, refetch, error, loginid]);
 

diff --git a/packages/api-v2/src/hooks/useAvailableWallets.ts b/packages/api-v2/src/hooks/useAvailableWallets.ts
@@ -11,7 +11,8 @@ const useAvailableWallets = () => {
         },
         {
             staleTime: Infinity,
-        }
+        },
+        false
     );
 
     const modifiedData = useMemo(() => {

diff --git a/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx b/packages/wallets/src/components/DesktopWalletsList/DesktopWalletsList.tsx
@@ -1,22 +1,17 @@
 import React from 'react';
-import { useActiveWalletAccount, useAuthorize, useCurrencyConfig } from '@deriv/api-v2';
+import { useActiveWalletAccount } from '@deriv/api-v2';
 import { AccountsList } from '../AccountsList';
 import { WalletsCardLoader } from '../SkeletonLoader';
 import { WalletListCard } from '../WalletListCard';
 import { WalletsContainer } from '../WalletsContainer';
 import './DesktopWalletsList.scss';
 
 const DesktopWalletsList: React.FC = () => {
-    const { data: activeWallet, isLoading: isActiveWalletLoading } = useActiveWalletAccount();
-    const { isLoading: isAuthorizeLoading } = useAuthorize();
-    const { isLoading: isCurrencyConfigLoading } = useCurrencyConfig();
-
-    const isLoading = isActiveWalletLoading || isAuthorizeLoading || isCurrencyConfigLoading;
-
+    const { data: activeWallet, isInitializing } = useActiveWalletAccount();
     return (
         <div className='wallets-desktop-wallets-list'>
-            {isLoading && <WalletsCardLoader />}
-            {!isLoading && (
+            {isInitializing && <WalletsCardLoader />}
+            {!isInitializing && (
                 <WalletsContainer
                     key={activeWallet && `wallets-card-${activeWallet?.loginid}`}
                     renderHeader={() => <WalletListCard />}

diff --git a/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx b/packages/wallets/src/components/WalletListCardBalance/WalletListCardBalance.tsx
@@ -4,14 +4,19 @@ import { WalletText } from '../Base';
 import './WalletListCardBalance.scss';
 
 const WalletListCardBalance = () => {
-    const { isLoading } = useBalance();
-    const { data: activeWallet, isLoading: isActiveWalletLoading } = useActiveWalletAccount();
-
+    const { isLoading: isBalanceLoading } = useBalance();
+    const { data: activeWallet, isInitializing: isActiveWalletInitializing } = useActiveWalletAccount();
     const balance = activeWallet?.display_balance;
 
+    // ideally we should have one specific hook to use data & loading state together
+    // as right now, we are using useBalance just to figure out if account data is complete
+    // useActiveWalletAccount shouldn't return isLoading=false until the data is complete,
+    // but its not the case at the moment,
+    const showLoader = isBalanceLoading || isActiveWalletInitializing;
+
     return (
         <div className='wallets-balance__container'>
-            {isLoading || isActiveWalletLoading ? (
+            {showLoader ? (
                 <div
                     className='wallets-skeleton wallets-balance--loader'
                     data-testid='dt_wallet_list_card_balance_loader'

diff --git a/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx b/packages/wallets/src/components/WalletsAddMoreCarousel/WalletsAddMoreCarousel.tsx
@@ -12,7 +12,10 @@ import './WalletsAddMoreCarousel.scss';
 const WalletsAddMoreCarousel: React.FC = () => {
     const { isDesktop, isMobile } = useDevice();
     const { data: wallets, isLoading } = useAllWalletAccounts();
-    const { isLoading: isAuthorizeLoading } = useAuthorize();
+    const { isInitializing } = useAuthorize();
+
+    const showLoader = isInitializing || isLoading;
+
     const [walletsAddMoreEmblaRef, walletsAddMoreEmblaAPI] = useEmblaCarousel({
         align: 0,
         containScroll: 'trimSnaps',
@@ -53,11 +56,11 @@ const WalletsAddMoreCarousel: React.FC = () => {
             </div>
             <div className='wallets-add-more__carousel' data-testid='dt-wallets-add-more' ref={walletsAddMoreEmblaRef}>
                 <div className='wallets-add-more__carousel-wrapper' id='wallets_add_more_carousel_wrapper'>
-                    {(isLoading || isAuthorizeLoading) &&
+                    {showLoader &&
                         Array.from({ length: 8 }).map((_, idx) => (
                             <WalletsAddMoreLoader key={`wallets-add-more-loader-${idx}`} />
                         ))}
-                    {!(isLoading || isAuthorizeLoading) &&
+                    {!showLoader &&
                         wallets?.map(wallet => (
                             <WalletsAddMoreCard
                                 currency={wallet.currency}