fix: history intersection loader issue (#1598)

Co-authored-by: Amir Ekbatanifard <[email protected]>

Author: Nick-1979

packages/extension-polkagate/src/popup/history/index.tsx

@@ -44,7 +44,7 @@ export default function TransactionHistory (): React.ReactElement {
         setTabIndex ={setTabIndex}
         tabIndex={tabIndex}
       />
-      <Grid container item sx={{ gap: '5px', height: '70%', maxHeight: window.innerHeight - 145, overflowY: 'auto', px: '15px' }}>
+      <Grid container id='scrollArea' item sx={{ gap: '5px', height: '70%', maxHeight: window.innerHeight - 145, overflowY: 'auto', px: '15px' }}>
         {grouped && Object.keys(grouped).length > 0 &&
           Object.entries(grouped)?.map((group) => {
             const [date, info] = group;
@@ -71,6 +71,7 @@ export default function TransactionHistory (): React.ReactElement {
         {(grouped === undefined || (transfersTx.isFetching && tabHistory?.length === 0)) &&
         <Progress pt='150px' size={50} title={t('Loading history')} type='grid' />
         }
+        <div id='observerObj' style={{ height: '1px' }} />
         {grouped &&
           <Grid container justifyContent='center'>
             {
@@ -85,7 +86,6 @@ export default function TransactionHistory (): React.ReactElement {
               )
             }
           </Grid>}
-        <div id='observerObj' />
       </Grid>
     </>
   );

packages/extension-polkagate/src/popup/history/modal/HistoryModal.tsx

@@ -51,7 +51,7 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
               setTabIndex ={setTabIndex}
               tabIndex={tabIndex}
             />
-            <Grid container item sx={{ gap: '5px', height: '70%', maxHeight: 650 - 145, overflowY: 'auto' }}>
+            <Grid container id='scrollArea' item sx={{ gap: '5px', height: '70%', maxHeight: 650 - 145, overflowY: 'auto' }}>
               {grouped && Object.keys(grouped).length > 0 &&
                 Object.entries(grouped)?.map((group) => {
                   const [date, info] = group;
@@ -93,7 +93,7 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
                     )
                   }
                 </Grid>}
-              <div id='observerObj' />
+              <div id='observerObj' style={{ height: '1px' }} />
             </Grid>
           </>
         }

packages/extension-polkagate/src/popup/history/useTransactionHistory.tsx

@@ -180,30 +180,48 @@ export default function useTransactionHistory (address: string | undefined, tabI
       return;
     }
 
-    const observerCallback = async (): Promise<void> => {
+    const observerCallback = (entries: IntersectionObserverEntry[]): void => {
+      const [entry] = entries;
+
+      if (!entry.isIntersecting) {
+        return; // If the observer object is not in view, do nothing
+      }
+
       if (receivingTransfers.current?.isFetching) {
-        return;
+        return; // If already fetching, do nothing
       }
 
       if (!receivingTransfers.current?.hasMore) {
-        return observerInstance?.current?.disconnect();
+        observerInstance.current?.disconnect();
+        console.log('No more data to load, disconnecting observer.');
+
+        return;
       }
 
-      await getTransfers(receivingTransfers.current);
+      getTransfers(receivingTransfers.current) // Fetch more transfers if available
+        .catch((error) => {
+          console.error('Error fetching transfers:', error);
+        });
     };
 
     const options = {
       root: document.getElementById('scrollArea'),
       rootMargin: '0px',
-      threshold: 1.0
+      threshold: 1.0 // Trigger when 100% of the target (observerObj) is visible
     };
 
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     observerInstance.current = new IntersectionObserver(observerCallback, options);
+
     const target = document.getElementById('observerObj');
 
-    target && observerInstance.current.observe(target);
-  }, [chainName, formatted, getTransfers, tabHistory]);
+    if (target) {
+      observerInstance.current.observe(target); // Start observing the target
+    }
+
+    return () => {
+      observerInstance.current?.disconnect();
+    };
+  }, [chainName, formatted, getTransfers]);
 
   return { grouped, tabHistory, transfersTx };
 }

packages/extension-polkagate/src/util/api/getTransfers.ts

@@ -1,24 +1,21 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-/* eslint-disable sort-keys */
+import type { TransferRequest } from '../types';
 
 import request from 'umi-request';
 
-import { TransferRequest } from '../types';
-
 const nullObject = {
   code: 0,
-  message: 'Success',
-  generated_at: Date.now(),
   data: {
     count: 0,
     transfers: null
-  }
+  },
+  generated_at: Date.now(),
+  message: 'Success'
 } as unknown as TransferRequest;
 
-export function getTxTransfers(chainName: string, address: string, pageNum: number, pageSize: number): Promise<TransferRequest> {
+export function getTxTransfers (chainName: string, address: string, pageNum: number, pageSize: number): Promise<TransferRequest> {
   if (!chainName) {
     return Promise.resolve(nullObject);
   }
@@ -46,6 +43,6 @@ export function getTxTransfers(chainName: string, address: string, pageNum: numb
   });
 }
 
-function postReq(api: string, data: Record<string, unknown> = {}, option?: Record<string, unknown>): Promise<TransferRequest> {
+function postReq (api: string, data: Record<string, unknown> = {}, option?: Record<string, unknown>): Promise<TransferRequest> {
   return request.post(api, { data, ...option });
 }