pixel-react 1.10.10-0 → 1.10.10-1

package/lib/index.js

@@ -14879,7 +14879,9 @@ const TreeTable = ({
   onAddCancel = () => {}
 }) => {
   const observerRef = React.useRef(null);
-  const triggeredNodesRef = React.useRef(new Set()); // Track already triggered nodes
+  const isTriggeredAbove = React.useRef(false); // Track if pagination for "above" direction has been triggered
+  const isTriggeredBelow = React.useRef(false); // Track if pagination for "below" direction has been triggered
+  const isTriggeredOnce = React.useRef(false); // Ensure 2-second delay triggers only once
   // Throttled version of loadMore
   const throttledLoadMore = React.useRef(throttle(direction => {
     loadMore(direction);
@@ -14892,19 +14894,25 @@ const TreeTable = ({
     if (!scrollContainer || !firstNode || !lastNode || !treeData?.length) return;
     const isLastResourceAbove = treeData[0]?.lastResource;
     const isLastResourceBelow = treeData[treeData.length - 1]?.lastResource;
+    // Skip pagination if both last resources are present
     if (isLastResourceAbove && isLastResourceBelow) return;
     const observerCallback = entries => {
       entries.forEach(entry => {
         const nodeId = entry.target.id;
         const direction = nodeId === 'ff-table-tree-last-node' ? 'below' : 'above';
         if (entry.isIntersecting) {
-          if (!triggeredNodesRef.current.has(nodeId) && (direction === 'above' && !isLastResourceAbove || direction === 'below' && !isLastResourceBelow)) {
-            triggeredNodesRef.current.add(nodeId);
-            throttledLoadMore(direction);
+          // Trigger only once for each direction
+          if (direction === 'above' && !isTriggeredAbove.current) {
+            if (!isLastResourceAbove) {
+              throttledLoadMore(direction);
+              isTriggeredAbove.current = true;
+            }
+          } else if (direction === 'below' && !isTriggeredBelow.current) {
+            if (!isLastResourceBelow) {
+              throttledLoadMore(direction);
+              isTriggeredBelow.current = true;
+            }
           }
-        } else {
-          // Remove node from triggered set when it goes out of view
-          triggeredNodesRef.current.delete(nodeId);
         }
       });
     };
@@ -14913,8 +14921,29 @@ const TreeTable = ({
       rootMargin: '8px',
       threshold: 0.1
     });
-    if (!isLastResourceAbove) observerRef.current.observe(firstNode);
-    if (!isLastResourceBelow) observerRef.current.observe(lastNode);
+    // Initial pagination trigger after 2 seconds if first or last node is in view inside the scroll container
+    const checkInitialPaginationTrigger = () => {
+      if (isTriggeredOnce.current) return;
+      const scrollContainerRect = scrollContainer.getBoundingClientRect();
+      const firstNodeRect = firstNode?.getBoundingClientRect();
+      const lastNodeRect = lastNode?.getBoundingClientRect();
+      // Check if the first node is inside the scroll container
+      const isFirstNodeInView = firstNodeRect && firstNodeRect.top >= scrollContainerRect.top && firstNodeRect.bottom <= scrollContainerRect.bottom;
+      // Check if the last node is inside the scroll container
+      const isLastNodeInView = lastNodeRect && lastNodeRect.top >= scrollContainerRect.top && lastNodeRect.bottom <= scrollContainerRect.bottom;
+      if (isFirstNodeInView || isLastNodeInView) {
+        isTriggeredOnce.current = true;
+        setTimeout(() => {
+          if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
+          if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
+        }, 2000); // Delay the first pagination trigger by 2 seconds
+      } else {
+        // Observe first and last node immediately
+        if (!isLastResourceAbove) observerRef.current?.observe(firstNode);
+        if (!isLastResourceBelow) observerRef.current?.observe(lastNode);
+      }
+    };
+    checkInitialPaginationTrigger();
     return () => {
       observerRef.current?.disconnect();
       throttledLoadMore.cancel();