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.

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 () => {