From cf066be3e0a8530d7b0ff4307909397200844b6a Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Thu, 3 Oct 2024 14:17:53 +0800
Subject: [PATCH 1/3] 
 ahmed/DAPI-721/fix--UI-break-account-type-filter-token-table

---
 src/components/AccountSwitcher/index.tsx      |  2 +-
 src/components/custom-tabs/custom-tabs.scss   |  2 +-
 .../api-token-table/api-token-table.tsx       | 29 +++++++++----------
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/AccountSwitcher/index.tsx b/src/components/AccountSwitcher/index.tsx
index 37de0fbe..1d1e1f96 100644
--- a/src/components/AccountSwitcher/index.tsx
+++ b/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) => {
diff --git a/src/components/custom-tabs/custom-tabs.scss b/src/components/custom-tabs/custom-tabs.scss
index a9534e70..2dc1325d 100644
--- a/src/components/custom-tabs/custom-tabs.scss
+++ b/src/components/custom-tabs/custom-tabs.scss
@@ -6,7 +6,7 @@
   font-size: 20px;
   font-family: var(--ibm-font-family-base);
   font-weight: var(--ifm-font-weight-semibold);
-  overflow-x: hidden;
+  overflow-x: visible;
 
   &_header {
     margin-block: 45px;
diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx
index 80a36653..aaaea45d 100644
--- a/src/features/dashboard/components/api-token-table/api-token-table.tsx
+++ b/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,15 @@ const ApiTokenTable = (props: HTMLAttributes<HTMLDivElement>) => {
           </Button>
         </div>
         <div className={styles.account_switcher}>
-          <AccountSwitcher onChange={handleChange} />
+          <AccountSwitcher onChange={onChange}/>
         </div>
       </div>
 
-      {loading ? (
-        <Spinner />
-      ) : isLoadingTokens ? (
+      {isAccountChange || isLoadingTokens ? (
         <Spinner />
-      ) : tokens?.length ? (
+      ) : tokens?.length > 0 && (
         renderTable()
-      ) : null}
+      )}
     </div>
   );
 };

From 8a22e2f00678c00e7020faf8ac2913b3f653a5cd Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Thu, 3 Oct 2024 14:20:00 +0800
Subject: [PATCH 2/3] fix optional chain

---
 .../components/api-token-table/api-token-table.tsx         | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/features/dashboard/components/api-token-table/api-token-table.tsx b/src/features/dashboard/components/api-token-table/api-token-table.tsx
index aaaea45d..be4adf0b 100644
--- a/src/features/dashboard/components/api-token-table/api-token-table.tsx
+++ b/src/features/dashboard/components/api-token-table/api-token-table.tsx
@@ -119,11 +119,8 @@ const ApiTokenTable = () => {
         </div>
       </div>
 
-      {isAccountChange || isLoadingTokens ? (
-        <Spinner />
-      ) : tokens?.length > 0 && (
-        renderTable()
-      )}
+      {isAccountChange || isLoadingTokens ? ( <Spinner /> ) 
+      : tokens.length > 0 && ( renderTable() )}
     </div>
   );
 };

From 792a26bda88e8a4f9eebfbbcfc96be6fcda2c1eb Mon Sep 17 00:00:00 2001
From: muhammad-ahmed <muhammad.ahmed@regentmarkets.com>
Date: Thu, 3 Oct 2024 14:51:17 +0800
Subject: [PATCH 3/3] chore: trigger build