cogsbox-state 0.5.377 → 0.5.379

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cogsbox-state",
-  "version": "0.5.377",
+  "version": "0.5.379",
   "description": "React state management library with form controls and server sync",
   "type": "module",
   "main": "./dist/index.js",

package/src/CogsState.tsx

@@ -1933,11 +1933,13 @@ function createProxyHandler<T>(
                   console.log(
                     "ACTION (GETTING_HEIGHTS): Setting range to end and starting loop."
                   );
+
                   setRange({
                     startIndex: Math.max(0, totalCount - 10 - overscan),
                     endIndex: totalCount,
                   });
 
+                  let intervalId: NodeJS.Timeout;
                   intervalId = setInterval(() => {
                     const lastItemIndex = totalCount - 1;
                     const shadowArray =
@@ -1949,15 +1951,43 @@ function createProxyHandler<T>(
 
                     if (lastItemHeight > 0) {
                       clearInterval(intervalId);
+
                       if (!shouldNotScroll.current) {
-                        console.log(
-                          "ACTION (GETTING_HEIGHTS): Measurement success -> SCROLLING_TO_BOTTOM"
-                        );
+                        const prevCount = prevTotalCountRef.current;
+                        const addedItems = totalCount - prevCount;
+                        const smallAddition = addedItems > 0 && addedItems <= 3;
+
+                        if (smallAddition) {
+                          // Let DOM render before measuring + scrolling
+                          requestAnimationFrame(() => {
+                            const prevBottom =
+                              positions[prevCount] ?? container.scrollHeight;
+                            const newBottom = container.scrollHeight;
+                            const delta = newBottom - prevBottom;
+
+                            if (delta > 0) {
+                              container.scrollBy({
+                                top: delta,
+                                behavior: "smooth",
+                              });
+                            }
 
-                        setStatus("SCROLLING_TO_BOTTOM");
+                            console.log(
+                              "ACTION (GETTING_HEIGHTS): Small addition -> LOCKED_AT_BOTTOM"
+                            );
+                            setStatus("LOCKED_AT_BOTTOM");
+                          });
+                        } else {
+                          console.log(
+                            "ACTION (GETTING_HEIGHTS): Large change -> SCROLLING_TO_BOTTOM"
+                          );
+                          setStatus("SCROLLING_TO_BOTTOM");
+                        }
                       }
                     }
-                  }, 100);
+                  }, 50);
+
+                  return () => clearInterval(intervalId);
                 } else if (status === "SCROLLING_TO_BOTTOM") {
                   console.log(
                     "ACTION (SCROLLING_TO_BOTTOM): Executing scroll."
@@ -1987,33 +2017,23 @@ function createProxyHandler<T>(
                   return () => clearTimeout(timeoutId);
                 }
 
-                // If status is IDLE_NOT_AT_BOTTOM or LOCKED_AT_BOTTOM, we do nothing here.
-                // The scroll has either finished or been disabled by the user.
-
                 return () => {
                   if (intervalId) clearInterval(intervalId);
                 };
               }, [status, totalCount, positions]);
 
-              // --- 3. USER INTERACTION & RANGE UPDATER ---
               useEffect(() => {
                 const container = containerRef.current;
                 if (!container) return;
 
-                // The scroll distance threshold. One item's height is a great default.
                 const scrollThreshold = itemHeight;
 
                 const handleUserScroll = () => {
-                  // Essential guard for our own programmatic scrolls.
                   if (isProgrammaticScroll.current) {
                     return;
                   }
 
                   const scrollTop = container.scrollTop;
-
-                  // --- THE CORE LOGIC YOU REQUESTED ---
-                  // Is the user just wiggling the scrollbar? If so, exit.
-                  // This is a very cheap check that runs on every scroll event.
                   if (
                     Math.abs(scrollTop - lastUpdateAtScrollTop.current) <
                     scrollThreshold
@@ -2021,8 +2041,6 @@ function createProxyHandler<T>(
                     return;
                   }
 
-                  // --- IF WE ARE HERE, WE HAVE SCROLLED A "DECENT AMOUNT" ---
-
                   console.log(
                     `Threshold passed at ${scrollTop}px. Recalculating range...`
                   );