fix: infinity scrolling of bank account transactions

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -29,28 +29,41 @@ function AccountTransactionsListRoot({
   return (
     <AccountTransactionsProvider>
       <AppContentShell hideAside={!openMatchingTransactionAside}>
-        <AppContentShell.Main>
-          <AccountTransactionsActionsBar />
-          <AccountTransactionsDetailsBar />
-          <AccountTransactionsProgressBar />
-
-          <DashboardPageContent>
-            <AccountTransactionsFilterTabs />
-
-            <Suspense fallback={<Spinner size={30} />}>
-              <AccountTransactionsContent />
-            </Suspense>
-          </DashboardPageContent>
-        </AppContentShell.Main>
-
-        <AppContentShell.Aside>
-          <CategorizeTransactionAside />
-        </AppContentShell.Aside>
+        <AccountTransactionsMain />
+        <AccountTransactionsAside />
       </AppContentShell>
     </AccountTransactionsProvider>
   );
 }
 
+function AccountTransactionsMain() {
+  const { setScrollableRef } = useAccountTransactionsContext();
+
+  return (
+    <AppContentShell.Main ref={(e) => setScrollableRef(e)}>
+      <AccountTransactionsActionsBar />
+      <AccountTransactionsDetailsBar />
+      <AccountTransactionsProgressBar />
+
+      <DashboardPageContent>
+        <AccountTransactionsFilterTabs />
+
+        <Suspense fallback={<Spinner size={30} />}>
+          <AccountTransactionsContent />
+        </Suspense>
+      </DashboardPageContent>
+    </AppContentShell.Main>
+  );
+}
+
+function AccountTransactionsAside() {
+  return (
+    <AppContentShell.Aside>
+      <CategorizeTransactionAside />
+    </AppContentShell.Aside>
+  );
+}
+
 export default R.compose(
   withBanking(
     ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsProvider.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { DashboardInsider } from '@/components';
 import { useCashflowAccounts, useAccount } from '@/hooks/query';
@@ -41,6 +41,8 @@ function AccountTransactionsProvider({ query, ...props }) {
     isLoading: isBankAccountMetaSummaryLoading,
   } = useGetBankAccountSummaryMeta(accountId);
 
+  const [scrollableRef, setScrollableRef] = useState();
+
   // Provider payload.
   const provider = {
     accountId,
@@ -56,6 +58,9 @@ function AccountTransactionsProvider({ query, ...props }) {
 
     filterTab,
     setFilterTab,
+
+    scrollableRef,
+    setScrollableRef
   };
 
   return (

packages/webapp/src/containers/CashFlow/AccountTransactions/ExcludedTransactions/ExcludedTransactionsTable.tsx

@@ -16,6 +16,7 @@ import { TABLES } from '@/constants/tables';
 import { useMemorizedColumnsWidths } from '@/hooks';
 import { useExcludedTransactionsColumns } from './_utils';
 import { useExcludedTransactionsBoot } from './ExcludedTransactionsTableBoot';
+import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 
 import { ActionsMenu } from './_components';
 import { useUnexcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
@@ -37,6 +38,8 @@ function ExcludedTransactionsTableRoot({
   const { mutateAsync: unexcludeBankTransaction } =
     useUnexcludeUncategorizedTransaction();
 
+  const { scrollableRef } = useAccountTransactionsContext();
+
   // Retrieve table columns.
   const columns = useExcludedTransactionsColumns();
 
@@ -97,6 +100,7 @@ function ExcludedTransactionsTableRoot({
       className="table-constrant"
       selectionColumn={true}
       onSelectedRowsChange={handleSelectedRowsChange}
+      windowScrollerProps={{ scrollElement: scrollableRef }}
       payload={{
         onRestore: handleRestoreClick,
       }}

packages/webapp/src/containers/CashFlow/AccountTransactions/RecognizedTransactions/RecognizedTransactionsTable.tsx

@@ -20,6 +20,7 @@ import { useRecognizedTransactionsBoot } from './RecognizedTransactionsTableBoot
 
 import { ActionsMenu } from './_components';
 import { compose } from '@/utils';
+import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import {
   WithBankingActionsProps,
@@ -49,6 +50,8 @@ function RecognizedTransactionsTableRoot({
   const [initialColumnsWidths, , handleColumnResizing] =
     useMemorizedColumnsWidths(TABLES.UNCATEGORIZED_ACCOUNT_TRANSACTIONS);
 
+  const { scrollableRef } = useAccountTransactionsContext();
+
   // Handle cell click.
   const handleCellClick = (cell, event) => {
     setUncategorizedTransactionIdForMatching(
@@ -102,6 +105,7 @@ function RecognizedTransactionsTableRoot({
       vListOverscanRowCount={0}
       initialColumnsWidths={initialColumnsWidths}
       onColumnResizing={handleColumnResizing}
+      windowScrollerProps={{ scrollElement: scrollableRef }}
       noResults={<RecognizedTransactionsTableNoResults />}
       className="table-constrant"
       payload={{

packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -22,6 +22,7 @@ import { useMemorizedColumnsWidths } from '@/hooks';
 import { useAccountUncategorizedTransactionsContext } from '../AllTransactionsUncategorizedBoot';
 import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import { useAccountUncategorizedTransactionsColumns } from './hooks';
+import { useAccountTransactionsContext } from '../AccountTransactionsProvider';
 
 import { compose } from '@/utils';
 import { withBanking } from '../../withBanking';
@@ -48,6 +49,8 @@ function AccountTransactionsDataTable({
   // Retrieve table columns.
   const columns = useAccountUncategorizedTransactionsColumns();
 
+  const { scrollableRef } = useAccountTransactionsContext();
+
   // Retrieve list context.
   const { uncategorizedTransactions, isUncategorizedTransactionsLoading } =
     useAccountUncategorizedTransactionsContext();
@@ -124,6 +127,7 @@ function AccountTransactionsDataTable({
         onCategorize: handleCategorizeBtnClick,
       }}
       onSelectedRowsChange={handleSelectedRowsChange}
+      windowScrollerProps={{ scrollElement: scrollableRef }}
       className={clsx('table-constrant', styles.table, {
         [styles.showCategorizeColumn]: enableMultipleCategorization,
       })}