@1771technologies/lytenyte-pro 2.2.0 → 2.2.1

package/dist/data-source-server/source/use-on-view-change.d.ts

@@ -1,3 +1,3 @@
 import type { ServerData } from "../server-data";
 import type { DataRequest } from "../types";
-export declare function useOnViewChange<T>(source: ServerData, requestsForView: DataRequest[], setRequestsForView: (v: DataRequest[]) => void): (view: import("@1771technologies/lytenyte-shared").SpanLayout) => void;
+export declare function useOnViewChange<T>(source: ServerData, requestsForView: DataRequest[], setRequestsForView: (v: DataRequest[]) => void, debounceDuration: number): (view: import("@1771technologies/lytenyte-shared").SpanLayout) => void;

package/dist/data-source-server/source/use-on-view-change.js

@@ -1,13 +1,37 @@
+import { useRef } from "react";
 import { useEvent } from "@1771technologies/lytenyte-core/internal";
 import { equal } from "@1771technologies/js-utils";
-export function useOnViewChange(source, requestsForView, setRequestsForView) {
-    const onViewChange = useEvent((bounds) => {
-        // This will result in the server sending the requests for the current view.
-        source.rowViewBounds = [bounds.rowCenterStart, bounds.rowCenterEnd];
+export function useOnViewChange(source, requestsForView, setRequestsForView, debounceDuration) {
+    const timerRef = useRef(null);
+    const pendingBoundsRef = useRef(null);
+    // Reads latest requestsForView/setRequestsForView at call time (via useEvent), so the
+    // timer always flushes against the current state even if renders occurred while pending.
+    const flush = useEvent(() => {
+        const bounds = pendingBoundsRef.current;
+        if (!bounds)
+            return;
+        pendingBoundsRef.current = null;
+        source.rowViewBounds = bounds;
         const requests = source.requestsForView();
-        if (equal(requests, requestsForView))
+        if (!equal(requests, requestsForView))
+            setRequestsForView(requests);
+    });
+    const onViewChange = useEvent((bounds) => {
+        if (debounceDuration <= 0) {
+            source.rowViewBounds = [bounds.rowCenterStart, bounds.rowCenterEnd];
+            const requests = source.requestsForView();
+            if (!equal(requests, requestsForView))
+                setRequestsForView(requests);
             return;
-        setRequestsForView(requests);
+        }
+        // Store the latest bounds so the timer always flushes with the final scroll position, not an intermediate one.
+        pendingBoundsRef.current = [bounds.rowCenterStart, bounds.rowCenterEnd];
+        if (timerRef.current !== null)
+            clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+            timerRef.current = null;
+            flush();
+        }, debounceDuration);
     });
     return onViewChange;
 }

package/dist/data-source-server/use-server-data-source.js

@@ -34,7 +34,8 @@ export function useServerDataSource(props) {
     const rowParents = useRowParents(source);
     const rowsBetween = useRowsBetween(source);
     const rowChildren = useRowChildren(source);
-    const onViewChange = useOnViewChange(source, state.requestsForView, state.setRequestsForView);
+    // TODO @Lee expose a scroll debounce prop.
+    const onViewChange = useOnViewChange(source, state.requestsForView, state.setRequestsForView, 200);
     const idSpec = useEvent((id) => {
         const node = source.tree.rowIdToNode.get(id);
         if (!node || node.kind === "leaf")

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
@@ -85,14 +85,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/dom-utils": "2.2.0",
-    "@1771technologies/lytenyte-core": "2.2.0",
-    "@1771technologies/lytenyte-design": "2.2.0",
-    "@1771technologies/js-utils": "2.2.0",
-    "@1771technologies/lytenyte-shared": "2.2.0"
+    "@1771technologies/lytenyte-shared": "2.2.1",
+    "@1771technologies/dom-utils": "2.2.1",
+    "@1771technologies/lytenyte-core": "2.2.1",
+    "@1771technologies/js-utils": "2.2.1",
+    "@1771technologies/lytenyte-design": "2.2.1"
   },
   "devDependencies": {
-    "@1771technologies/grid-sample-data": "2.2.0"
+    "@1771technologies/grid-sample-data": "2.2.1"
   },
   "peerDependencies": {
     "react": "18.0.0 || ^19.0.0",