Add fetching status to EVM Proposals lists

Author: saajand

src/components/EVMProposalsTable.tsx

@@ -34,6 +34,7 @@ interface EVMProposalsPageProps {
   proposal_data: Proposal[];
   limit: number;
   offset: number;
+  loading?: boolean;
   handleOffsetChange: (offset: number) => void;
   approveAction?: (hash: string) => void;
   executeAction?: (hash: string) => void;
@@ -43,6 +44,7 @@ const EVMProposalsTable: React.FC<EVMProposalsPageProps> = ({
   proposal_data,
   limit,
   offset,
+  loading = false,
   handleOffsetChange,
   approveAction,
   executeAction,
@@ -77,8 +79,12 @@ const EVMProposalsTable: React.FC<EVMProposalsPageProps> = ({
             </tr>
           </thead>
           <tbody>
-            {proposal_data.length > 0 ? (
-              proposal_data.map((proposal: Proposal, index: number) => (
+            <tr className="data-loading-details text-center font-semibold">
+              {loading && <td colSpan={7}>Loading...</td>}
+              {!loading && proposal_data.length === 0 && <td colSpan={7}>No proposals to display.</td>}
+            </tr>
+
+            {proposal_data.map((proposal: Proposal, index: number) => (
                 <tr key={index} className="">
                   <td className=" ">{proposal.proposal}</td>
 
@@ -104,12 +110,7 @@ const EVMProposalsTable: React.FC<EVMProposalsPageProps> = ({
                     </Link>
                   </td>
                 </tr>
-              ))
-            ) : (
-              <tr>
-                <td className="text-center">No proposals</td>
-              </tr>
-            )}
+              ))}
           </tbody>
         </table>
       </div>

src/pages/EVM/EVMApproveProposalsPage.tsx

@@ -48,6 +48,7 @@ const EVMApproveProposalsPage = () => {
   const [proposal_data, setProposalData] = useState<Proposal[]>([]);
   const [thres, setThresh] = useState<number>(0);
   const [owner, setOwner] = useState<string[]>([]);
+  const [fetchingData, setFetchingData] = useState(false);
 
   function generateSignature() {
     if (!signer || !signer._address) {
@@ -135,6 +136,7 @@ const EVMApproveProposalsPage = () => {
   };
   const fetchData = async () => {
     try {
+      setFetchingData(true);
       const data = await loadProposalData();
       let filteredData = data;
       if (chainId !== 0) {
@@ -145,6 +147,8 @@ const EVMApproveProposalsPage = () => {
       setProposalData(paginatedData);
     } catch (error) {
       console.error('Error fetching proposal data:', error);
+    } finally {
+      setFetchingData(false);
     }
   };
 
@@ -192,6 +196,7 @@ const EVMApproveProposalsPage = () => {
           proposal_data={proposal_data}
           limit={itemsPerPageLimit}
           offset={itemsListOffset}
+          loading={fetchingData}
           handleOffsetChange={handlePaginationChanges}
           approveAction={handleApprove}
         />

src/pages/EVM/EVMExecuteProposals.tsx

@@ -27,6 +27,7 @@ const EVMExecuteProposals = () => {
   const itemsPerPageLimit = 5;
   const [itemsListOffset, setItemsListOffset] = useState(0);
   let contract = new ethers.Contract(contractAddress, abi, signer);
+  const [fetchingData, setFetchingData] = useState(false);
 
   const handleExecute = async (proposal: any) => {
     setLoading(true);
@@ -44,13 +45,16 @@ const EVMExecuteProposals = () => {
   };
   const fetchFilteredData = async () => {
     try {
+      setFetchingData(true);
       const data = await loadProposalData();
 
       let filteredData = data.filter((proposal: any) => proposal.status === 'Passed');
       const paginatedData = filteredData.slice(itemsListOffset, itemsListOffset + itemsPerPageLimit);
       setProposalData(paginatedData);
     } catch (error) {
       console.error('Error fetching proposal data:', error);
+    } finally {
+      setFetchingData(false);
     }
   };
   const handlePaginationChanges = (offset: number) => {
@@ -86,6 +90,7 @@ const EVMExecuteProposals = () => {
             proposal_data={proposal_data}
             limit={itemsPerPageLimit}
             offset={itemsListOffset}
+            loading={fetchingData}
             handleOffsetChange={handlePaginationChanges}
             approveAction={handleExecute}
           />

src/pages/EVM/EVMExecutedProposals.tsx

@@ -17,16 +17,20 @@ const EVMExecutedProposals = () => {
 
   const itemsPerPageLimit = 5;
   const [itemsListOffset, setItemsListOffset] = useState(0);
+  const [fetchingData, setFetchingData] = useState(false);
 
   const fetchFilteredData = async () => {
     try {
+      setFetchingData(true);
       const data = await loadProposalData();
 
       let filteredData = data.filter((proposal: any) => proposal.status === 'Executed');
       const paginatedData = filteredData.slice(itemsListOffset, itemsListOffset + itemsPerPageLimit);
       setProposalData(paginatedData);
     } catch (error) {
       console.error('Error fetching proposal data:', error);
+    } finally {
+      setFetchingData(false);
     }
   };
   const handlePaginationChanges = (offset: number) => {
@@ -50,6 +54,7 @@ const EVMExecutedProposals = () => {
             proposal_data={proposal_data}
             limit={itemsPerPageLimit}
             offset={itemsListOffset}
+            loading={fetchingData}
             handleOffsetChange={handlePaginationChanges}
           />
         </div>