From 9c2dd62c7e30c9c02a60055ca54d6a1c1d587141 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 18 Jul 2026 15:43:58 +0100
Subject: [PATCH] Implement scroll optimization in ObjectTable component by
 introducing scroll operation throttling and refactoring scroll handling
 logic. Add dedicated functions for scrolling up and down to improve user
 experience during data loading.

---
 .../Dashboard/common/ObjectTable.jsx          | 72 +++++++++++++++----
 1 file changed, 57 insertions(+), 15 deletions(-)

diff --git a/src/components/Dashboard/common/ObjectTable.jsx b/src/components/Dashboard/common/ObjectTable.jsx
index 330f7bb..8fce195 100644
--- a/src/components/Dashboard/common/ObjectTable.jsx
+++ b/src/components/Dashboard/common/ObjectTable.jsx
@@ -48,6 +48,8 @@ import FilterIcon from '../../Icons/FilterIcon'
 const logger = loglevel.getLogger('DasboardTable')
 logger.setLevel(config.logLevel)
 
+const SCROLL_THRESHOLD = 50
+
 const RowForm = ({ record, isEditing, onRegister, children }) => {
   const [form] = Form.useForm()
   useEffect(() => {
@@ -189,6 +191,29 @@ const ObjectTable = forwardRef(
         }))
     }, [pageSize])
 
+    const scrollOperationTimingOut = useRef(false)
+    const scrollOperationTimeout = useRef(null)
+
+    const runScrollOperation = useCallback((operation) => {
+      if (scrollOperationTimingOut.current) return
+
+      scrollOperationTimingOut.current = true
+      operation()
+
+      scrollOperationTimeout.current = setTimeout(() => {
+        scrollOperationTimingOut.current = false
+        scrollOperationTimeout.current = null
+      }, 150)
+    }, [])
+
+    useEffect(() => {
+      return () => {
+        if (scrollOperationTimeout.current) {
+          clearTimeout(scrollOperationTimeout.current)
+        }
+      }
+    }, [])
+
     const renderActions = (objectData) => {
       return (
         <Flex gap='small' align='center' justify='center'>
@@ -333,6 +358,30 @@ const ObjectTable = forwardRef(
       }
     }, [pages, createSkeletonData, fetchData, lazyLoading])
 
+    const scrollDown = useCallback(
+      (target, scrollHeight) => {
+        setTimeout(() => {
+          target.scrollTop = scrollHeight / 2 - target.clientHeight
+        }, 0)
+        setLazyLoading(true)
+        logger.debug('Loading next page...')
+        loadNextPage()
+      },
+      [loadNextPage]
+    )
+
+    const scrollUp = useCallback(
+      (target, scrollHeight) => {
+        setTimeout(() => {
+          target.scrollTop = scrollHeight / 2
+        }, 0)
+        setLazyLoading(true)
+        logger.debug('Loading previous page...')
+        loadPreviousPage()
+      },
+      [loadPreviousPage]
+    )
+
     const handleScroll = useCallback(
       (e) => {
         const { target } = e
@@ -343,26 +392,19 @@ const ObjectTable = forwardRef(
         const prevPage = lowestPage - 1
 
         // Load more data when scrolling down
-        if (scrollHeight - scrollTop - clientHeight < 100 && hasMore) {
-          setTimeout(() => {
-            target.scrollTop = scrollHeight / 2
-          }, 0)
-          setLazyLoading(true)
-          logger.debug('Loading next page...')
-          loadNextPage()
+        if (
+          scrollHeight - scrollTop - clientHeight < SCROLL_THRESHOLD &&
+          hasMore
+        ) {
+          runScrollOperation(() => scrollDown(target, scrollHeight))
         }
 
         // Load previous data when scrolling up
-        if (scrollTop < 100 && prevPage > 0) {
-          setTimeout(() => {
-            target.scrollTop = scrollHeight / 2
-          }, 0)
-          setLazyLoading(true)
-          logger.debug('Loading previous page...')
-          loadPreviousPage()
+        if (scrollTop < SCROLL_THRESHOLD && prevPage > 0) {
+          runScrollOperation(() => scrollUp(target, scrollHeight))
         }
       },
-      [loadNextPage, loadPreviousPage, hasMore, pages]
+      [hasMore, pages, runScrollOperation, scrollDown, scrollUp]
     )
 
     const reload = useCallback(async () => {