@infinite-table/infinite-react 0.2.0 → 0.2.1

package/index.d.ts

@@ -199,6 +199,103 @@ declare module "components/types/SubscriptionCallback" {
         onChange: (fn: SubscriptionCallbackOnChangeFn<T>) => VoidFn;
     }
 }
+declare module "components/types/Size" {
+    export interface Size {
+        width: number;
+        height: number;
+    }
+    export type OnResizeFn = (size: {
+        width: number;
+        height: number;
+    }) => void;
+}
+declare module "components/VirtualBrain/index" {
+    import { Logger } from "utils/debug";
+    import { Size } from "components/types/Size";
+    import type { OnScrollFn, ScrollPosition } from "components/types/ScrollPosition";
+    type MainAxisOptions = 'vertical' | 'horizontal';
+    export type VirtualBrainOptions = {
+        mainAxis: MainAxisOptions;
+        itemSize: MainAxisSize;
+        itemSpan?: ({ itemIndex }: {
+            itemIndex: number;
+        }) => number;
+        count: number;
+        name?: string;
+    };
+    export type MainAxisSize = number | ((itemIndex: number) => number);
+    type OnRenderCountChangeFn = (renderCount: number) => void;
+    type OnSizeChangeFn = (size: number) => void;
+    type OnDestroyFn = () => void;
+    export type GetItemPositionFn = (itemIndex: number) => number;
+    export type RenderRange = {
+        renderStartIndex: number;
+        renderEndIndex: number;
+    };
+    export type OnRenderRangeChangeFn = (renderRange: RenderRange) => void;
+    export class VirtualBrain extends Logger {
+        private scrollPosition;
+        private scrollPositionOnMainAxis;
+        private itemSpanParent;
+        private itemSpanValue;
+        private itemSizeCache;
+        private itemOffsetCache;
+        private options;
+        private destroyed;
+        private totalSize;
+        private onScrollFns;
+        private onTotalSizeChangeFns;
+        private onRenderCountChangeFns;
+        private onRenderRangeChangeFns;
+        private onDestroyFns;
+        name: string | undefined;
+        private renderCount;
+        private renderRange;
+        private availableSize;
+        constructor(options: VirtualBrainOptions);
+        setAvailableSize: (size: Size) => void;
+        getOptions(): VirtualBrainOptions;
+        private updateRenderCount;
+        private computeRenderCount;
+        private setRenderCount;
+        private updateRenderRange;
+        getRenderStartIndex(): number;
+        getRenderCount: () => number;
+        setScrollPosition: (scrollPosition: ScrollPosition) => void;
+        private notifyScrollChange;
+        private notifyDestroy;
+        private notifyTotalSizeChange;
+        private notifyRenderCountChange;
+        private notifyRenderRangeChange;
+        getRenderRange: () => RenderRange;
+        private setRenderRange;
+        private computeRenderRange;
+        getScrollPosition: () => ScrollPosition;
+        onScroll: (fn: OnScrollFn) => () => void;
+        onTotalSizeChange: (fn: OnSizeChangeFn) => () => void;
+        onRenderCountChange: (fn: OnRenderCountChangeFn) => () => void;
+        onRenderRangeChange: (fn: OnRenderRangeChangeFn) => () => void;
+        onDestroy: (fn: OnDestroyFn) => () => void;
+        update: (newCount: VirtualBrainOptions['count'], newItemSize: VirtualBrainOptions['itemSize'], newItemSpan?: VirtualBrainOptions['itemSpan']) => void;
+        private reset;
+        private computeItemSpanUpTo;
+        private computeCacheFor;
+        private getItemSizeCacheFor;
+        getItemSpan: (itemIndex: number) => number;
+        getItemSpanParent: (itemIndex: number) => number;
+        getItemSizeWithSpan: (itemIndex: number, itemSpan: number) => number;
+        /**
+         * For now, this doesn't take into account the itemspan, and it's okay not to
+         * @param itemIndex
+         * @returns the size of the specified item
+         */
+        getItemSize: (itemIndex: number) => number;
+        getTotalSize: () => number;
+        getItemAt: (scrollPos: number) => number;
+        getItemOffsetFor: (itemIndex: number) => number;
+        destroy: () => void;
+    }
+}
 declare module "components/DataSource/types" {
     import * as React from 'react';
     import { MultisortInfo } from "utils/multisort/index";
@@ -211,6 +308,7 @@ declare module "components/DataSource/types" {
     import { NonUndefined } from "components/types/NonUndefined";
     import { SubscriptionCallback } from "components/types/SubscriptionCallback";
     import { ScrollStopInfo } from "components/InfiniteTable/types/InfiniteTableProps";
+    import { RenderRange } from "components/VirtualBrain/index";
     export interface DataSourceDataParams<T> {
         originalDataArray: T[];
         sortInfo?: DataSourceSortInfo<T>;
@@ -290,8 +388,11 @@ declare module "components/DataSource/types" {
         showSeparatePivotColumnForSingleAggregation: boolean;
         dataParams?: DataSourceDataParams<T>;
         originalLazyGroupData: LazyGroupDataDeepMap<T>;
+        originalLazyGroupDataChangeDetect: number | string;
+        scrollStopDelayUpdatedByTable: number;
         notifyScrollbarsChange: SubscriptionCallback<Scrollbars>;
         notifyScrollStop: SubscriptionCallback<ScrollStopInfo>;
+        notifyRenderRangeChange: SubscriptionCallback<RenderRange>;
         originalDataArray: T[];
         lastSortDataArray?: T[];
         lastGroupDataArray?: InfiniteTableRowInfo<T>[];
@@ -383,16 +484,24 @@ declare module "components/DataSource/publicHooks/useDataSource" {
     export function useDataSource<T>(): DataSourceState<T>;
     export function useDataSourceContextValue<T>(): DataSourceContextValue<T>;
 }
+declare module "utils/getGlobal" {
+    export function getGlobal<T extends Window>(): T;
+}
 declare module "components/hooks/useEffectWithChanges" {
     import { EffectCallback } from 'react';
     export function useEffectWithChanges(fn: (changes: Record<string, any>, prevValues: Record<string, any>) => void | (() => void), deps: Record<string, any>): void;
     export function useEffectWithObject(fn: EffectCallback, deps: Record<string, any>): void;
 }
+declare module "components/utils/debounce" {
+    export function debounce(fn: Function, { wait }: {
+        wait: number;
+    }): (...args: any[]) => void;
+}
 declare module "components/DataSource/privateHooks/useLoadData" {
     import { ComponentStateGeneratedActions } from "components/hooks/useComponentState";
     import { DataSourceDataParams, DataSourceData, DataSourceState } from "components/DataSource/types";
     export function buildDataSourceDataParams<T>(componentState: DataSourceState<T>, overrides?: Partial<DataSourceDataParams<T>>): DataSourceDataParams<T>;
-    export function loadData<T>(data: DataSourceData<T>, componentState: DataSourceState<T>, actions: ComponentStateGeneratedActions<DataSourceState<T>>, overrides?: Partial<DataSourceDataParams<T>>): void;
+    export function loadData<T>(data: DataSourceData<T>, componentState: DataSourceState<T>, actions: ComponentStateGeneratedActions<DataSourceState<T>>, overrides?: Partial<DataSourceDataParams<T>>): Promise<void>;
     export function useLoadData<T>(): void;
 }
 declare module "components/DataSource/state/normalizeSortInfo" {
@@ -1179,16 +1288,6 @@ declare module "components/InfiniteTable/types/InfiniteTableProps" {
         horizontal: boolean;
     };
 }
-declare module "components/types/Size" {
-    export interface Size {
-        width: number;
-        height: number;
-    }
-    export type OnResizeFn = (size: {
-        width: number;
-        height: number;
-    }) => void;
-}
 declare module "components/VirtualBrain/ScrollListener" {
     import { OnScrollFn, ScrollPosition } from "components/types/ScrollPosition";
     export class ScrollListener {
@@ -1535,9 +1634,6 @@ declare module "components/InfiniteTable/utils/adjustColumnOrderForPinning" {
     import { InfiniteTablePropColumnOrderNormalized, InfiniteTablePropColumnPinningMap } from "components/InfiniteTable/types/InfiniteTableProps";
     export const adjustColumnOrderForPinning: (columnOrder: InfiniteTablePropColumnOrderNormalized, columnPinning: InfiniteTablePropColumnPinningMap) => InfiniteTablePropColumnOrderNormalized;
 }
-declare module "utils/getGlobal" {
-    export function getGlobal<T extends Window>(): T;
-}
 declare module "components/utils/getScrollbarWidth" {
     export function getScrollbarWidth(): number;
 }
@@ -1797,93 +1893,6 @@ declare module "components/InfiniteTable/components/InfiniteTableBody/InfiniteTa
 declare module "components/InfiniteTable/components/InfiniteTableBody/index" {
     export * from "components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody";
 }
-declare module "components/VirtualBrain/index" {
-    import { Logger } from "utils/debug";
-    import { Size } from "components/types/Size";
-    import type { OnScrollFn, ScrollPosition } from "components/types/ScrollPosition";
-    type MainAxisOptions = 'vertical' | 'horizontal';
-    export type VirtualBrainOptions = {
-        mainAxis: MainAxisOptions;
-        itemSize: MainAxisSize;
-        itemSpan?: ({ itemIndex }: {
-            itemIndex: number;
-        }) => number;
-        count: number;
-        name?: string;
-    };
-    export type MainAxisSize = number | ((itemIndex: number) => number);
-    type OnRenderCountChangeFn = (renderCount: number) => void;
-    type OnSizeChangeFn = (size: number) => void;
-    type OnDestroyFn = () => void;
-    export type GetItemPositionFn = (itemIndex: number) => number;
-    export type RenderRange = {
-        renderStartIndex: number;
-        renderEndIndex: number;
-    };
-    export type OnRenderRangeChangeFn = (renderRange: RenderRange) => void;
-    export class VirtualBrain extends Logger {
-        private scrollPosition;
-        private scrollPositionOnMainAxis;
-        private itemSpanParent;
-        private itemSpanValue;
-        private itemSizeCache;
-        private itemOffsetCache;
-        private options;
-        private destroyed;
-        private totalSize;
-        private onScrollFns;
-        private onTotalSizeChangeFns;
-        private onRenderCountChangeFns;
-        private onRenderRangeChangeFns;
-        private onDestroyFns;
-        name: string | undefined;
-        private renderCount;
-        private renderRange;
-        private availableSize;
-        constructor(options: VirtualBrainOptions);
-        setAvailableSize: (size: Size) => void;
-        getOptions(): VirtualBrainOptions;
-        private updateRenderCount;
-        private computeRenderCount;
-        private setRenderCount;
-        private updateRenderRange;
-        getRenderStartIndex(): number;
-        getRenderCount: () => number;
-        setScrollPosition: (scrollPosition: ScrollPosition) => void;
-        private notifyScrollChange;
-        private notifyDestroy;
-        private notifyTotalSizeChange;
-        private notifyRenderCountChange;
-        private notifyRenderRangeChange;
-        getRenderRange: () => RenderRange;
-        private setRenderRange;
-        private computeRenderRange;
-        getScrollPosition: () => ScrollPosition;
-        onScroll: (fn: OnScrollFn) => () => void;
-        onTotalSizeChange: (fn: OnSizeChangeFn) => () => void;
-        onRenderCountChange: (fn: OnRenderCountChangeFn) => () => void;
-        onRenderRangeChange: (fn: OnRenderRangeChangeFn) => () => void;
-        onDestroy: (fn: OnDestroyFn) => () => void;
-        update: (newCount: VirtualBrainOptions['count'], newItemSize: VirtualBrainOptions['itemSize'], newItemSpan?: VirtualBrainOptions['itemSpan']) => void;
-        private reset;
-        private computeItemSpanUpTo;
-        private computeCacheFor;
-        private getItemSizeCacheFor;
-        getItemSpan: (itemIndex: number) => number;
-        getItemSpanParent: (itemIndex: number) => number;
-        getItemSizeWithSpan: (itemIndex: number, itemSpan: number) => number;
-        /**
-         * For now, this doesn't take into account the itemspan, and it's okay not to
-         * @param itemIndex
-         * @returns the size of the specified item
-         */
-        getItemSize: (itemIndex: number) => number;
-        getTotalSize: () => number;
-        getItemAt: (scrollPos: number) => number;
-        getItemOffsetFor: (itemIndex: number) => number;
-        destroy: () => void;
-    }
-}
 declare module "components/InfiniteTable/components/ScrollbarPlaceholder" {
     import * as React from 'react';
     function HorizontalScrollbarPlaceholderFn(props: {

package/index.esm.js

@@ -2048,7 +2048,7 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect9, useMemo as useMemo4 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo5 } from "react";
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 import {
@@ -2393,7 +2393,7 @@ var getMultisortFunction = (sortInfo, get) => {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-import { useEffect as useEffect8, useRef as useRef6, useState as useState4 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef6, useState as useState4 } from "react";
 
 // src/utils/DeepMap/once.ts
 function once(fn) {
@@ -3029,11 +3029,33 @@ function useEffectWithChanges(fn, deps) {
   }, useEffectDeps);
 }
 
+// src/components/utils/debounce.ts
+function debounce(fn, { wait }) {
+  let timeout = null;
+  return function(...args) {
+    const context = this;
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      fn.apply(context, args);
+    }, wait);
+  };
+}
+
 // src/components/DataSource/privateHooks/useLoadData.ts
+var getRafPromise = () => new Promise((resolve) => {
+  requestAnimationFrame(resolve);
+});
 var SKIP_DATA_CHANGES_KEYS = {
   originalDataArray: true,
   changes: true
 };
+function getChangeDetect() {
+  var _a;
+  const perfNow = (_a = getGlobal().performance) == null ? void 0 : _a.now();
+  return `${Date.now()}:${perfNow}`;
+}
 function buildDataSourceDataParams(componentState, overrides) {
   var _a, _b;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
@@ -3077,10 +3099,10 @@ function loadData(data, componentState, actions, overrides) {
     data = data(dataParams);
   }
   const dataIsPromise = typeof data === "object" && typeof data.then === "function";
-  if (dataIsPromise) {
+  if (dataIsPromise && !componentState.fullLazyLoad) {
     actions.loading = true;
   }
-  Promise.resolve(data).then((dataParam) => {
+  return Promise.resolve(data).then((dataParam) => {
     var _a, _b, _c;
     let dataArray = [];
     let skipAssign = false;
@@ -3094,7 +3116,7 @@ function loadData(data, componentState, actions, overrides) {
         actions.pivotMappings = remoteData.mappings;
       }
       if (componentState.fullLazyLoad && dataParams.groupKeys) {
-        const lazyGroupData = DeepMap.clone(componentState.originalLazyGroupData);
+        const lazyGroupData = componentState.originalLazyGroupData;
         const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
         const newGroupRowInfo = {
           totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
@@ -3108,7 +3130,7 @@ function loadData(data, componentState, actions, overrides) {
           };
           currentGroupRowInfo.items.length = currentGroupRowInfo.totalCount;
           const start = (_b = dataParams.lazyLoadStartIndex) != null ? _b : 0;
-          const end = start + ((_c = dataParams.lazyLoadBatchSize) != null ? _c : dataArray.length);
+          const end = Math.min((_c = remoteData.totalCount) != null ? _c : start + dataParams.lazyLoadBatchSize);
           for (let i = start; i < end; i++) {
             currentGroupRowInfo.items[i] = newGroupRowInfo.items[i - start];
           }
@@ -3119,7 +3141,7 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupData = lazyGroupData;
+        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
       }
     } else {
       dataArray = dataParam;
@@ -3127,7 +3149,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise) {
+    if (dataIsPromise && !componentState.fullLazyLoad) {
       actions.loading = false;
     }
   });
@@ -3146,9 +3168,7 @@ function useLoadData() {
     pivotBy,
     livePagination,
     livePaginationCursor,
-    cursorId: stateCursorId,
-    lazyLoadBatchSize,
-    notifyScrollStop
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = useState4({
     vertical: false,
@@ -3189,33 +3209,7 @@ function useLoadData() {
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = useRef6(true);
-  useEffect8(() => {
-    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
-      return notifyScrollStop.onChange((param) => {
-        console.log("scroll stop", param);
-        if (!param) {
-          return;
-        }
-        const componentState2 = getComponentState();
-        const {
-          firstVisibleRowIndex: startIndex,
-          lastVisibleRowIndex: endIndex
-        } = param;
-        const firstBatchStart = Math.floor(startIndex / lazyLoadBatchSize) * lazyLoadBatchSize;
-        const lastBatchStart = Math.floor(endIndex / lazyLoadBatchSize) * lazyLoadBatchSize;
-        const isRowLoaded = (index) => componentState2.dataArray[index].data != null;
-        for (let batchStartIndex = firstBatchStart; batchStartIndex <= lastBatchStart; batchStartIndex = batchStartIndex + lazyLoadBatchSize) {
-          if (!isRowLoaded(batchStartIndex)) {
-            loadData(componentState2.data, componentState2, actions, {
-              lazyLoadBatchSize,
-              lazyLoadStartIndex: batchStartIndex
-            });
-          }
-        }
-      });
-    }
-    return;
-  }, [lazyLoadBatchSize]);
+  useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
     if (typeof componentState2.data !== "function") {
@@ -3236,6 +3230,126 @@ function useLoadData() {
     }
   }, depsObject);
 }
+function useLazyLoadRange() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState
+  } = useComponentState();
+  const loadingCache = useMemo4(() => {
+    return new Map();
+  }, [componentState.data]);
+  globalThis.loadingCache = loadingCache;
+  const {
+    lazyLoadBatchSize,
+    notifyRenderRangeChange,
+    dataArray,
+    scrollStopDelayUpdatedByTable
+  } = componentState;
+  const latestRenderRangeRef = useRef6(null);
+  const loadRange = (param, cache = loadingCache) => {
+    const componentState2 = getComponentState();
+    param = param || latestRenderRangeRef.current;
+    if (!param) {
+      return;
+    }
+    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = param;
+    if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
+      return;
+    }
+    lazyLoadRange({
+      startIndex,
+      endIndex,
+      lazyLoadBatchSize,
+      componentState: componentState2,
+      componentActions: actions
+    }, cache);
+  };
+  const debouncedLoadRange = useMemo4(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  useEffect8(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      return notifyRenderRangeChange.onChange((param) => {
+        latestRenderRangeRef.current = param;
+        loadRange(param, loadingCache);
+      });
+    }
+    return;
+  }, [lazyLoadBatchSize, loadingCache]);
+  useEffect8(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      debouncedLoadRange();
+    }
+    return;
+  }, [dataArray]);
+}
+function lazyLoadRange(options, cache) {
+  const {
+    startIndex,
+    endIndex,
+    lazyLoadBatchSize,
+    componentState,
+    componentActions
+  } = options;
+  const { dataArray } = componentState;
+  const isRowLoaded = (index) => dataArray[index].data != null;
+  const perGroupFnCalls = new DeepMap();
+  const rootGroupKeys = ["_______xxx______"];
+  for (let i = startIndex; i <= endIndex; i++) {
+    const rowInfo = dataArray[i];
+    if (!rowInfo) {
+      continue;
+    }
+    const rowLoaded = rowInfo.data != null;
+    const parentGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.groupKeys) {
+      parentGroupKeys.pop();
+    }
+    const cacheKeys = parentGroupKeys.length ? parentGroupKeys : rootGroupKeys;
+    const indexInGroup = rowInfo.indexInGroup;
+    if (!rowLoaded) {
+      let fnCalls = perGroupFnCalls.get(cacheKeys);
+      const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
+      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
+      const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
+      const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
+      if (batchStartRowLoaded || (fnCalls == null ? void 0 : fnCalls[batchStartRowId])) {
+        continue;
+      }
+      const shouldSetFnCalls = !fnCalls;
+      fnCalls = fnCalls || {};
+      const currentFnCall = {
+        lazyLoadStartIndex: batchStartIndexInGroup,
+        lazyLoadBatchSize,
+        groupKeys: parentGroupKeys
+      };
+      if (!fnCalls[batchStartRowId]) {
+        fnCalls[batchStartRowId] = currentFnCall;
+      }
+      if (shouldSetFnCalls) {
+        perGroupFnCalls.set(cacheKeys, fnCalls);
+      }
+    }
+  }
+  let initialPromise = Promise.resolve(true);
+  const allFnCalls = [];
+  perGroupFnCalls.topDownValues().forEach((record) => {
+    allFnCalls.push(...Object.values(record));
+  });
+  allFnCalls.reduce((promise, fnCall) => {
+    const cacheKey = `${fnCall.groupKeys.join("-")}:${fnCall.lazyLoadStartIndex}`;
+    if (cache && cache.has(cacheKey)) {
+      return promise;
+    }
+    cache == null ? void 0 : cache.set(cacheKey, true);
+    const args = [componentState.data, componentState, componentActions, fnCall];
+    return promise.then(() => getRafPromise()).then(() => loadData(...args)).then(() => {
+      requestAnimationFrame(() => {
+        cache == null ? void 0 : cache.delete(cacheKey);
+      });
+    });
+  }, initialPromise);
+}
 
 // src/components/DataSource/state/normalizeSortInfo.ts
 var EMPTY_ARRAY = Object.freeze([]);
@@ -3435,8 +3549,11 @@ function initSetupState2() {
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
+    notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
+    originalLazyGroupDataChangeDetect: 0,
     originalDataArray,
     cursorId: defaultCursorId,
     showSeparatePivotColumnForSingleAggregation: false,
@@ -3631,7 +3748,7 @@ function getPivotColumnsAndColumnGroups({
           var _a;
           const { rowInfo } = params;
           if (!rowInfo.data) {
-            return "Loading ... TODO replace this with a loading indicator";
+            return "Loading ...";
           }
           return rowInfo.groupKeys ? rowInfo.groupKeys[((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) - 1] : null;
         }
@@ -3809,6 +3926,7 @@ function concludeReducer(params) {
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
+    "originalLazyGroupDataChangeDetect",
     "groupBy",
     "groupRowsState",
     "pivotBy",
@@ -3953,7 +4071,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = useMemo4(() => {
+  const groupByMap = useMemo5(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -4505,7 +4623,7 @@ var InfiniteTableCell = memo3(InfiniteTableCellFn);
 var import_binary_search = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
-  useMemo as useMemo5,
+  useMemo as useMemo6,
   useRef as useRef7,
   useState as useState6
 } from "react";
@@ -4552,8 +4670,8 @@ var useColumnPointerEvents = ({
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = useMemo5(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = useMemo5(() => {
+  const column = useMemo6(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = useMemo6(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -4890,7 +5008,7 @@ function AvoidReactDiffFn(props) {
 var AvoidReactDiff = memo4(AvoidReactDiffFn);
 
 // src/components/RawList/useVirtualRenderer.ts
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo7 } from "react";
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 import {
@@ -5206,7 +5324,7 @@ function createRenderer(brain) {
 function useVirtualRenderer({
   brain
 }) {
-  return useMemo6(() => {
+  return useMemo7(() => {
     return createRenderer(brain);
   }, [brain]);
 }
@@ -5298,7 +5416,7 @@ var InfiniteTableHeader = memo6(InfiniteTableHeaderFn);
 import {
   createElement as createElement18,
   memo as memo7,
-  useMemo as useMemo7,
+  useMemo as useMemo8,
   useRef as useRef10
 } from "react";
 
@@ -5512,7 +5630,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   } = useInfiniteTable();
   const domRef = useRef10(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
-  const columnHeaderGroups = useMemo7(() => {
+  const columnHeaderGroups = useMemo8(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
       columnGroups: computedColumnGroups,
       columnGroupsDepthsMap,
@@ -5749,7 +5867,7 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useCallback as useCallback17, useEffect as useEffect22, useMemo as useMemo10, useRef as useRef17 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect22, useMemo as useMemo11, useRef as useRef17 } from "react";
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
@@ -6435,7 +6553,7 @@ var useOnContainerScroll = ({
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 import {
   createElement as createElement29,
-  useMemo as useMemo8
+  useMemo as useMemo9
 } from "react";
 import { useCallback as useCallback15 } from "react";
 
@@ -6541,7 +6659,7 @@ function PinnedRowsContainer(props) {
     brain,
     renderRow
   } = props;
-  const style = useMemo8(() => {
+  const style = useMemo9(() => {
     const result = pinning === "end" ? {
       width: rowWidth,
       height,
@@ -6715,9 +6833,9 @@ function usePinnedStartRendering(params) {
 import { useEffect as useEffect21 } from "react";
 
 // src/components/hooks/useOnce.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 function useOnce(fn) {
-  const onceFn = useMemo9(() => {
+  const onceFn = useMemo10(() => {
     return once(fn);
   }, []);
   return onceFn();
@@ -7257,7 +7375,7 @@ function useListRendering(param) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const rowSpan = useMemo10(() => {
+  const rowSpan = useMemo11(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ itemIndex }) => {
       let maxSpan = 1;
@@ -7295,7 +7413,7 @@ function useListRendering(param) {
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
   const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
-  const scrollbars = useMemo10(() => ({
+  const scrollbars = useMemo11(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
@@ -7465,7 +7583,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -7615,10 +7733,10 @@ var origin = typeof window !== "undefined" ? window.location.origin : "";
 var [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
 var isInsideSandbox = protocol === "https" && sandboxUrl === "sandpack.codesandbox.io";
 var useLicense = (licenseKey = "") => {
-  const valid = useMemo11(() => {
+  const valid = useMemo12(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.0"
+      version: "0.2.1"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7820,7 +7938,8 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   } = useInfiniteTable();
   const {
     componentState: { dataArray, loading },
-    getState: getDataSourceState
+    getState: getDataSourceState,
+    componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -7833,7 +7952,8 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     onHeaderHeightCSSVarChange,
     rowHeightCSSVar,
     headerHeightCSSVar,
-    components
+    components,
+    scrollStopDelay
   } = componentState;
   const { columnShifts, bodySize } = componentState;
   const {
@@ -7846,6 +7966,7 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     scrollbars,
     applyScrollVertical,
     horizontalVirtualBrain,
+    verticalVirtualBrain,
     reservedContentHeight
   } = useListRendering({
     getComputed,
@@ -7854,6 +7975,13 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
+  useEffect24(() => {
+    const dataSourceState = getDataSourceState();
+    const onChange = debounce((renderRange) => {
+      dataSourceState.notifyRenderRangeChange(renderRange);
+    }, { wait: scrollStopDelay });
+    return verticalVirtualBrain.onRenderRangeChange(onChange);
+  }, [verticalVirtualBrain, scrollStopDelay]);
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
@@ -7866,6 +7994,9 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
+  useEffect24(() => {
+    dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
+  }, [scrollStopDelay]);
   return /* @__PURE__ */ createElement33("div", __spreadValues({
     ref: domRef
   }, domProps), header ? /* @__PURE__ */ createElement33(TableHeaderWrapper, {

package/index.js

@@ -3013,11 +3013,33 @@ function useEffectWithChanges(fn, deps) {
   }, useEffectDeps);
 }
 
+// src/components/utils/debounce.ts
+function debounce(fn, { wait }) {
+  let timeout = null;
+  return function(...args) {
+    const context = this;
+    if (timeout !== null) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      fn.apply(context, args);
+    }, wait);
+  };
+}
+
 // src/components/DataSource/privateHooks/useLoadData.ts
+var getRafPromise = () => new Promise((resolve) => {
+  requestAnimationFrame(resolve);
+});
 var SKIP_DATA_CHANGES_KEYS = {
   originalDataArray: true,
   changes: true
 };
+function getChangeDetect() {
+  var _a;
+  const perfNow = (_a = getGlobal().performance) == null ? void 0 : _a.now();
+  return `${Date.now()}:${perfNow}`;
+}
 function buildDataSourceDataParams(componentState, overrides) {
   var _a, _b;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
@@ -3061,10 +3083,10 @@ function loadData(data, componentState, actions, overrides) {
     data = data(dataParams);
   }
   const dataIsPromise = typeof data === "object" && typeof data.then === "function";
-  if (dataIsPromise) {
+  if (dataIsPromise && !componentState.fullLazyLoad) {
     actions.loading = true;
   }
-  Promise.resolve(data).then((dataParam) => {
+  return Promise.resolve(data).then((dataParam) => {
     var _a, _b, _c;
     let dataArray = [];
     let skipAssign = false;
@@ -3078,7 +3100,7 @@ function loadData(data, componentState, actions, overrides) {
         actions.pivotMappings = remoteData.mappings;
       }
       if (componentState.fullLazyLoad && dataParams.groupKeys) {
-        const lazyGroupData = DeepMap.clone(componentState.originalLazyGroupData);
+        const lazyGroupData = componentState.originalLazyGroupData;
         const key = [LAZY_ROOT_KEY_FOR_GROUPS, ...dataParams.groupKeys];
         const newGroupRowInfo = {
           totalCount: (_a = remoteData.totalCount) != null ? _a : dataArray.length,
@@ -3092,7 +3114,7 @@ function loadData(data, componentState, actions, overrides) {
           };
           currentGroupRowInfo.items.length = currentGroupRowInfo.totalCount;
           const start = (_b = dataParams.lazyLoadStartIndex) != null ? _b : 0;
-          const end = start + ((_c = dataParams.lazyLoadBatchSize) != null ? _c : dataArray.length);
+          const end = Math.min((_c = remoteData.totalCount) != null ? _c : start + dataParams.lazyLoadBatchSize);
           for (let i = start; i < end; i++) {
             currentGroupRowInfo.items[i] = newGroupRowInfo.items[i - start];
           }
@@ -3103,7 +3125,7 @@ function loadData(data, componentState, actions, overrides) {
           lazyGroupData.set(key, newGroupRowInfo);
         }
         skipAssign = true;
-        actions.originalLazyGroupData = lazyGroupData;
+        actions.originalLazyGroupDataChangeDetect = getChangeDetect();
       }
     } else {
       dataArray = dataParam;
@@ -3111,7 +3133,7 @@ function loadData(data, componentState, actions, overrides) {
     if (!skipAssign) {
       actions.originalDataArray = dataArray;
     }
-    if (dataIsPromise) {
+    if (dataIsPromise && !componentState.fullLazyLoad) {
       actions.loading = false;
     }
   });
@@ -3130,9 +3152,7 @@ function useLoadData() {
     pivotBy,
     livePagination,
     livePaginationCursor,
-    cursorId: stateCursorId,
-    lazyLoadBatchSize,
-    notifyScrollStop
+    cursorId: stateCursorId
   } = componentState;
   const [scrollbars, setScrollbars] = (0, import_react15.useState)({
     vertical: false,
@@ -3173,33 +3193,7 @@ function useLoadData() {
     cursorId: livePagination ? stateCursorId : null
   };
   const initialRef = (0, import_react15.useRef)(true);
-  (0, import_react15.useEffect)(() => {
-    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
-      return notifyScrollStop.onChange((param) => {
-        console.log("scroll stop", param);
-        if (!param) {
-          return;
-        }
-        const componentState2 = getComponentState();
-        const {
-          firstVisibleRowIndex: startIndex,
-          lastVisibleRowIndex: endIndex
-        } = param;
-        const firstBatchStart = Math.floor(startIndex / lazyLoadBatchSize) * lazyLoadBatchSize;
-        const lastBatchStart = Math.floor(endIndex / lazyLoadBatchSize) * lazyLoadBatchSize;
-        const isRowLoaded = (index) => componentState2.dataArray[index].data != null;
-        for (let batchStartIndex = firstBatchStart; batchStartIndex <= lastBatchStart; batchStartIndex = batchStartIndex + lazyLoadBatchSize) {
-          if (!isRowLoaded(batchStartIndex)) {
-            loadData(componentState2.data, componentState2, actions, {
-              lazyLoadBatchSize,
-              lazyLoadStartIndex: batchStartIndex
-            });
-          }
-        }
-      });
-    }
-    return;
-  }, [lazyLoadBatchSize]);
+  useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
     if (typeof componentState2.data !== "function") {
@@ -3220,6 +3214,126 @@ function useLoadData() {
     }
   }, depsObject);
 }
+function useLazyLoadRange() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState
+  } = useComponentState();
+  const loadingCache = (0, import_react15.useMemo)(() => {
+    return new Map();
+  }, [componentState.data]);
+  globalThis.loadingCache = loadingCache;
+  const {
+    lazyLoadBatchSize,
+    notifyRenderRangeChange,
+    dataArray,
+    scrollStopDelayUpdatedByTable
+  } = componentState;
+  const latestRenderRangeRef = (0, import_react15.useRef)(null);
+  const loadRange = (param, cache = loadingCache) => {
+    const componentState2 = getComponentState();
+    param = param || latestRenderRangeRef.current;
+    if (!param) {
+      return;
+    }
+    const { renderStartIndex: startIndex, renderEndIndex: endIndex } = param;
+    if (!lazyLoadBatchSize || lazyLoadBatchSize <= 0) {
+      return;
+    }
+    lazyLoadRange({
+      startIndex,
+      endIndex,
+      lazyLoadBatchSize,
+      componentState: componentState2,
+      componentActions: actions
+    }, cache);
+  };
+  const debouncedLoadRange = (0, import_react15.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react15.useEffect)(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      return notifyRenderRangeChange.onChange((param) => {
+        latestRenderRangeRef.current = param;
+        loadRange(param, loadingCache);
+      });
+    }
+    return;
+  }, [lazyLoadBatchSize, loadingCache]);
+  (0, import_react15.useEffect)(() => {
+    if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
+      debouncedLoadRange();
+    }
+    return;
+  }, [dataArray]);
+}
+function lazyLoadRange(options, cache) {
+  const {
+    startIndex,
+    endIndex,
+    lazyLoadBatchSize,
+    componentState,
+    componentActions
+  } = options;
+  const { dataArray } = componentState;
+  const isRowLoaded = (index) => dataArray[index].data != null;
+  const perGroupFnCalls = new DeepMap();
+  const rootGroupKeys = ["_______xxx______"];
+  for (let i = startIndex; i <= endIndex; i++) {
+    const rowInfo = dataArray[i];
+    if (!rowInfo) {
+      continue;
+    }
+    const rowLoaded = rowInfo.data != null;
+    const parentGroupKeys = rowInfo.groupKeys ? [...rowInfo.groupKeys] : [];
+    if (rowInfo.groupKeys) {
+      parentGroupKeys.pop();
+    }
+    const cacheKeys = parentGroupKeys.length ? parentGroupKeys : rootGroupKeys;
+    const indexInGroup = rowInfo.indexInGroup;
+    if (!rowLoaded) {
+      let fnCalls = perGroupFnCalls.get(cacheKeys);
+      const batchStartIndexInGroup = Math.floor(indexInGroup / lazyLoadBatchSize) * lazyLoadBatchSize;
+      const offset = rowInfo.indexInGroup - batchStartIndexInGroup;
+      const absoluteIndexOfBatchStart = dataArray[rowInfo.indexInAll - offset].indexInAll;
+      const batchStartRowLoaded = isRowLoaded(absoluteIndexOfBatchStart);
+      const batchStartRowId = dataArray[absoluteIndexOfBatchStart].id;
+      if (batchStartRowLoaded || (fnCalls == null ? void 0 : fnCalls[batchStartRowId])) {
+        continue;
+      }
+      const shouldSetFnCalls = !fnCalls;
+      fnCalls = fnCalls || {};
+      const currentFnCall = {
+        lazyLoadStartIndex: batchStartIndexInGroup,
+        lazyLoadBatchSize,
+        groupKeys: parentGroupKeys
+      };
+      if (!fnCalls[batchStartRowId]) {
+        fnCalls[batchStartRowId] = currentFnCall;
+      }
+      if (shouldSetFnCalls) {
+        perGroupFnCalls.set(cacheKeys, fnCalls);
+      }
+    }
+  }
+  let initialPromise = Promise.resolve(true);
+  const allFnCalls = [];
+  perGroupFnCalls.topDownValues().forEach((record) => {
+    allFnCalls.push(...Object.values(record));
+  });
+  allFnCalls.reduce((promise, fnCall) => {
+    const cacheKey = `${fnCall.groupKeys.join("-")}:${fnCall.lazyLoadStartIndex}`;
+    if (cache && cache.has(cacheKey)) {
+      return promise;
+    }
+    cache == null ? void 0 : cache.set(cacheKey, true);
+    const args = [componentState.data, componentState, componentActions, fnCall];
+    return promise.then(() => getRafPromise()).then(() => loadData(...args)).then(() => {
+      requestAnimationFrame(() => {
+        cache == null ? void 0 : cache.delete(cacheKey);
+      });
+    });
+  }, initialPromise);
+}
 
 // src/components/DataSource/state/normalizeSortInfo.ts
 var EMPTY_ARRAY = Object.freeze([]);
@@ -3419,8 +3533,11 @@ function initSetupState2() {
     dataParams: void 0,
     notifyScrollbarsChange: buildSubscriptionCallback(),
     notifyScrollStop: buildSubscriptionCallback(),
+    notifyRenderRangeChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
+    scrollStopDelayUpdatedByTable: 100,
     originalLazyGroupData,
+    originalLazyGroupDataChangeDetect: 0,
     originalDataArray,
     cursorId: defaultCursorId,
     showSeparatePivotColumnForSingleAggregation: false,
@@ -3615,7 +3732,7 @@ function getPivotColumnsAndColumnGroups({
           var _a;
           const { rowInfo } = params;
           if (!rowInfo.data) {
-            return "Loading ... TODO replace this with a loading indicator";
+            return "Loading ...";
           }
           return rowInfo.groupKeys ? rowInfo.groupKeys[((_a = rowInfo.groupKeys) == null ? void 0 : _a.length) - 1] : null;
         }
@@ -3793,6 +3910,7 @@ function concludeReducer(params) {
     "generateGroupRows",
     "originalDataArray",
     "originalLazyGroupData",
+    "originalLazyGroupDataChangeDetect",
     "groupBy",
     "groupRowsState",
     "pivotBy",
@@ -7523,7 +7641,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.2.0"
+      version: "0.2.1"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7718,7 +7836,8 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
   } = useInfiniteTable();
   const {
     componentState: { dataArray, loading },
-    getState: getDataSourceState
+    getState: getDataSourceState,
+    componentActions: dataSourceActions
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -7731,7 +7850,8 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     onHeaderHeightCSSVarChange,
     rowHeightCSSVar,
     headerHeightCSSVar,
-    components
+    components,
+    scrollStopDelay
   } = componentState;
   const { columnShifts, bodySize } = componentState;
   const {
@@ -7744,6 +7864,7 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     scrollbars,
     applyScrollVertical,
     horizontalVirtualBrain,
+    verticalVirtualBrain,
     reservedContentHeight
   } = useListRendering({
     getComputed,
@@ -7752,6 +7873,13 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     bodySize,
     computed
   });
+  React35.useEffect(() => {
+    const dataSourceState = getDataSourceState();
+    const onChange = debounce((renderRange) => {
+      dataSourceState.notifyRenderRangeChange(renderRange);
+    }, { wait: scrollStopDelay });
+    return verticalVirtualBrain.onRenderRangeChange(onChange);
+  }, [verticalVirtualBrain, scrollStopDelay]);
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
@@ -7764,6 +7892,9 @@ var InfiniteTableComponent = React35.memo(function InfiniteTableComponent2() {
     }
     notifyScrollbarsChange(scrollbars);
   }, [scrollbars]);
+  React35.useEffect(() => {
+    dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
+  }, [scrollStopDelay]);
   return /* @__PURE__ */ React35.createElement("div", __spreadValues({
     ref: domRef
   }, domProps), header ? /* @__PURE__ */ React35.createElement(TableHeaderWrapper, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1643662501272
+  "publishedAt": 1643825063998
 }