From 38a14d9e550b75145e1725e9b313c73109f12b58 Mon Sep 17 00:00:00 2001
From: Jason <jason.c.michalski@gmail.com>
Date: Fri, 5 Jan 2024 04:01:34 -0500
Subject: [PATCH] Fix load more when scrolling to end of rules table (#2167)

---
 .../src/components/ManageRules.tsx            |  1 -
 .../src/components/rules/SimpleTable.tsx      | 28 ++++++++-----------
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/packages/desktop-client/src/components/ManageRules.tsx b/packages/desktop-client/src/components/ManageRules.tsx
index 9ee61f96d4e..e9fe97548d6 100644
--- a/packages/desktop-client/src/components/ManageRules.tsx
+++ b/packages/desktop-client/src/components/ManageRules.tsx
@@ -284,7 +284,6 @@ function ManageRulesContent({
         <View style={{ flex: 1 }}>
           <RulesHeader />
           <SimpleTable
-            data={filteredRules}
             loadMore={loadMore}
             // Hide the last border of the item in the table
             style={{ marginBottom: -1 }}
diff --git a/packages/desktop-client/src/components/rules/SimpleTable.tsx b/packages/desktop-client/src/components/rules/SimpleTable.tsx
index 836a9ef8523..e388bcac06c 100644
--- a/packages/desktop-client/src/components/rules/SimpleTable.tsx
+++ b/packages/desktop-client/src/components/rules/SimpleTable.tsx
@@ -1,10 +1,9 @@
-import React, { type ReactNode, useEffect, useRef } from 'react';
+import React, { type ReactNode, type UIEvent, useRef } from 'react';
 
 import { type CSSProperties } from '../../style';
 import View from '../common/View';
 
 type SimpleTableProps = {
-  data: unknown;
   loadMore?: () => void;
   style?: CSSProperties;
   onHoverLeave?: () => void;
@@ -12,32 +11,27 @@ type SimpleTableProps = {
 };
 
 export default function SimpleTable({
-  data,
   loadMore,
   style,
   onHoverLeave,
   children,
 }: SimpleTableProps) {
   const contentRef = useRef<HTMLDivElement>();
-  const contentHeight = useRef<number>();
   const scrollRef = useRef<HTMLDivElement>();
 
-  function onScroll(e) {
-    if (contentHeight.current != null) {
-      if (loadMore && e.target.scrollTop > contentHeight.current - 750) {
-        loadMore();
-      }
+  function onScroll(e: UIEvent<HTMLElement>) {
+    if (
+      loadMore &&
+      Math.abs(
+        e.currentTarget.scrollHeight -
+          e.currentTarget.clientHeight -
+          e.currentTarget.scrollTop,
+      ) < 1
+    ) {
+      loadMore();
     }
   }
 
-  useEffect(() => {
-    if (contentRef.current) {
-      contentHeight.current = contentRef.current.getBoundingClientRect().height;
-    } else {
-      contentHeight.current = null;
-    }
-  }, [contentRef.current, data]);
-
   return (
     <View
       style={{