Merge pull request #143 from ahmed-deriv/ahmed/DAPI-721/fix--UI-break…

…-account-type-filter-token-table

Ahmed/dapi 721/fix  UI break account type filter token table

src/components/AccountSwitcher/index.tsx

@@ -9,7 +9,7 @@ import CurrencyIcon from '../CurrencyIcon';
 import styles from './account_switcher.module.scss';
 
 interface AccountSwitcherProps {
-  onChange: (accountName: string) => void;
+  onChange: (accountName?: string) => void;
 }
 
 const AccountSwitcher = ({ onChange }: AccountSwitcherProps) => {

src/features/dashboard/components/api-token-table/api-token-table.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Column } from 'react-table';
 import { Button, Heading, Text } from '@deriv-com/quill-ui';
 import { LabelPairedCirclePlusMdRegularIcon } from '@deriv/quill-icons';
@@ -61,19 +61,20 @@ const tableColumns: TTokenColumn[] = [
   },
 ];
 
-const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
+const ApiTokenTable = () => {
   const { tokens, isLoadingTokens } = useApiToken();
+  const [isAccountChange, setAccountChange] = useState(false);
   const { deviceType } = useDeviceType();
   const is_desktop = deviceType === 'desktop';
   const { updateCurrentTab } = useAppManager();
-  const [loading, setLoading] = useState(false);
 
-  const handleChange = (accountName: string) => {
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  };
+  const onChange = () => {
+    setAccountChange(true);
+  }
+
+  useEffect(() => {
+    setAccountChange(false);
+  }, [tokens]);
 
   const renderTable = () => {
     return is_desktop ? (
@@ -114,17 +115,12 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           </Button>
         </div>
         <div className={styles.account_switcher}>
-          <AccountSwitcher onChange={handleChange} />
+          <AccountSwitcher onChange={onChange}/>
         </div>
       </div>
 
-      {loading ? (
-        <Spinner />
-      ) : isLoadingTokens ? (
-        <Spinner />
-      ) : tokens?.length ? (
-        renderTable()
-      ) : null}
+      {isAccountChange || isLoadingTokens ? ( <Spinner /> ) 
+      : tokens.length > 0 && ( renderTable() )}
     </div>
   );
 };