From 16c7d0226da898ea2fc2cb26cbd9eef456f6ae49 Mon Sep 17 00:00:00 2001
From: hornilla-jowelyn <137761725+hornilla-jowelyn@users.noreply.github.com>
Date: Fri, 3 Nov 2023 16:04:49 +0800
Subject: [PATCH] added loaders to txn actions when processing and fixed nav
 menu responsiveness (#97)

---
 src/components/Transactions.tsx         | 32 +++++++++++++++++++++++++
 src/pages/account/[accountId]/index.tsx | 10 ++++----
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/src/components/Transactions.tsx b/src/components/Transactions.tsx
index eb7b844..da67a52 100644
--- a/src/components/Transactions.tsx
+++ b/src/components/Transactions.tsx
@@ -7,6 +7,7 @@ import {
   TransactionBadge,
   UserTally,
 } from '@/components';
+import { useLoadingScreenContext } from '@/context/LoadingScreen';
 import { useDebounce } from '@/hooks/useDebounce';
 import useMC from '@/hooks/useMC';
 import useMCStore from '@/stores/MCStore';
@@ -45,6 +46,8 @@ const Transactions = ({ address }: ITransactionsProps) => {
   ]);
   const { approveTxnDB, getJwtToken, rejectTxnDB, executeMCTxn } = useMC();
 
+  const loaders = useLoadingScreenContext();
+
   const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm, 1000);
@@ -97,12 +100,21 @@ const Transactions = ({ address }: ITransactionsProps) => {
     }
 
     try {
+      loaders.setAction({
+        type: 'SHOW_TRANSACTION_PROCESSING',
+      });
       await approveTxnDB(txn, jwt);
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);
       });
       fetchTransactions(jwt);
     } catch {
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       handleErrors('Error in approving transaction');
     }
   };
@@ -113,12 +125,21 @@ const Transactions = ({ address }: ITransactionsProps) => {
     }
 
     try {
+      loaders.setAction({
+        type: 'SHOW_TRANSACTION_PROCESSING',
+      });
       await rejectTxnDB(txn, jwt);
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);
       });
       fetchTransactions(jwt);
     } catch {
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       handleErrors('Error in approving transaction');
     }
   };
@@ -129,12 +150,23 @@ const Transactions = ({ address }: ITransactionsProps) => {
     }
 
     try {
+      loaders.setAction({
+        type: 'SHOW_TRANSACTION_PROCESSING',
+      });
+
       await executeMCTxn(txn, jwt);
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);
       });
+
       fetchTransactions(jwt);
     } catch {
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       handleErrors('Error in approving transaction');
     }
   };
diff --git a/src/pages/account/[accountId]/index.tsx b/src/pages/account/[accountId]/index.tsx
index fb7204e..f93f724 100644
--- a/src/pages/account/[accountId]/index.tsx
+++ b/src/pages/account/[accountId]/index.tsx
@@ -76,7 +76,7 @@ const Account = () => {
   }[] = useMemo(
     () => [
       {
-        icon: <DashboardIcon className='h-4 w-4 fill-black' />,
+        icon: <DashboardIcon className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Dashboard',
       },
       // {
@@ -84,16 +84,16 @@ const Account = () => {
       //   label: 'Assets',
       // },
       {
-        icon: <SwitchIcon className='h-4 w-4 fill-black' />,
+        icon: <SwitchIcon className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Transactions',
         badgeCount: multicliqueAccount?.statistics?.transactions?.data,
       },
       {
-        icon: <Proposal className='h-4 w-4 fill-black' />,
+        icon: <Proposal className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Manage ELIO DAO Policy',
       },
       {
-        icon: <SettingsIcon className='h-4 w-4 fill-black' />,
+        icon: <SettingsIcon className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Settings',
       },
     ],
@@ -151,7 +151,7 @@ const Account = () => {
                     active={currentTab === tab.label}
                     onClick={() => setCurrentTab(tab.label)}>
                     {tab.icon}
-                    {tab.label}
+                    <div className='w-full grow truncate'>{tab.label}</div>
                     {Boolean(tab.badgeCount) && (
                       <span className='ml-auto flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-error-content p-2 text-sm text-white'>
                         {tab.badgeCount}