@trackunit/react-components 1.9.20 → 1.9.21

package/index.cjs.js

@@ -3579,7 +3579,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  */
 const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsxRuntime.jsx("div", { className: cvaListContainer({
@@ -3597,10 +3597,12 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
                         type: "skeleton",
                         ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
                     };
-                    const hasHeader = rows.some(r => r.type === "header");
-                    const dataRowCount = rows.filter(r => r.type === "data").length;
-                    const loaderIndex = row.virtualRow.index - dataRowCount - (hasHeader ? 1 : 0);
-                    const shouldShowLoader = loadingConfig.type !== "none" && loaderIndex < (loadingConfig.initialLoadingCount ?? 10);
+                    // Use the total data count from useList, not visible rows (which are virtualized)
+                    const hasHeaderRow = !!header;
+                    const dataStartIndex = hasHeaderRow ? 1 : 0;
+                    const totalDataRows = dataStartIndex + count;
+                    const loaderIndex = row.virtualRow.index - totalDataRows;
+                    const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
                     return (jsxRuntime.jsx("li", { ...listItemProps, children: shouldShowLoader ? jsxRuntime.jsx(ListLoadingIndicator, { ...loadingConfig }) : null }, key));
                 }
                 // Render header row
@@ -3612,6 +3614,11 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
             }) }) }));
 };
 
+const DEFAULT_LOADING_INDICATOR_CONFIG = {
+    type: "skeleton",
+    initialLoadingCount: 10,
+    scrollLoadingCount: 3,
+};
 /**
  * A hook for managing virtualized list state and behavior.
  *
@@ -3644,7 +3651,7 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
     const containerRef = react.useRef(null);
     const listRef = react.useRef(null);
     const rowRefsMap = react.useRef(new Map());
@@ -3655,8 +3662,6 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     const totalDataRows = dataStartIndex + dataCount;
     // Calculate how many loading rows we need
     const getLoadingRowsCount = react.useCallback(() => {
-        if (!loadingIndicator)
-            return 0;
         if (pagination?.isLoading === false)
             return 0;
         const { type: loadingIndicatorType } = loadingIndicator;
@@ -3677,15 +3682,49 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
             }
         }
     }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
-    const totalRowCount = react.useMemo(() => totalDataRows + (pagination?.isLoading === true ? getLoadingRowsCount() : 0), [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
+    // Helper to determine if a specific loader index should be shown
+    const shouldShowLoaderAtIndex = react.useCallback((loaderIndex) => {
+        if (pagination?.isLoading === false)
+            return false;
+        const { type: loadingIndicatorType } = loadingIndicator;
+        let result;
+        switch (loadingIndicatorType) {
+            case "none":
+                result = false;
+                break;
+            case "spinner":
+                result = loaderIndex === 0;
+                break;
+            case "custom":
+            case "skeleton": {
+                const isInitialLoading = !pagination?.pageInfo;
+                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const maxCount = isInitialLoading ? initialCount : scrollCount;
+                result = loaderIndex < maxCount;
+                break;
+            }
+            default: {
+                throw new Error(`${loadingIndicatorType} is not known`);
+            }
+        }
+        return result;
+    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    const totalRowCount = react.useMemo(() => {
+        // Only add the exact number of loading rows we want to show
+        const loadingRows = pagination?.isLoading === true ? getLoadingRowsCount() : 0;
+        const total = totalDataRows + loadingRows;
+        return total;
+    }, [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
     // Estimate size for all rows (header, data, loading)
     const estimateSize = react.useCallback((index) => {
         // Loading rows
         if (index >= totalDataRows) {
             const loaderIndex = index - totalDataRows;
-            const shouldShowLoader = pagination?.isLoading === true && loaderIndex < getLoadingRowsCount();
+            const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
+            const estimatedHeight = shouldShowLoader ? estimateItemSize(0) : 0;
             // Empty loader rows should be estimated at 0 height to prevent blank space
-            return shouldShowLoader ? estimateItemSize(0) : 0;
+            return estimatedHeight;
         }
         // Header row (if exists, it's always at index 0)
         if (hasHeader && index === 0) {
@@ -3695,15 +3734,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         // Data rows - calculate the data index
         const dataIndex = index - dataStartIndex;
         return estimateItemSize(dataIndex);
-    }, [
-        estimateItemSize,
-        estimateHeaderSize,
-        totalDataRows,
-        pagination?.isLoading,
-        getLoadingRowsCount,
-        hasHeader,
-        dataStartIndex,
-    ]);
+    }, [estimateItemSize, estimateHeaderSize, totalDataRows, shouldShowLoaderAtIndex, hasHeader, dataStartIndex]);
     // Set up virtualization
     const virtualizer = useInfiniteScroll({
         pagination: pagination ?? noPagination,
@@ -3735,7 +3766,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     }, []);
     // Transform virtual items into typed rows
     const rows = react.useMemo(() => {
-        return virtualizer.getVirtualItems().map((virtualRow) => {
+        const virtualItems = virtualizer.getVirtualItems();
+        return virtualItems.map((virtualRow) => {
             const { index } = virtualRow;
             // Determine row type
             const isLoaderRow = index >= totalDataRows;
@@ -3802,6 +3834,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         getListItemProps,
         header,
         loadingIndicator,
+        shouldShowLoaderAtIndex,
+        count,
     };
 };
 

package/index.esm.js

@@ -3577,7 +3577,7 @@ const ListLoadingIndicator = ({ type, hasThumbnail, thumbnailShape, hasDescripti
  */
 const List = ({ children, className, dataTestId, topSeparatorOnScroll = false, separator = "line", 
 // UseListResult properties
-containerRef, listRef, rows, getListItemProps, header, loadingIndicator, isScrolling, scrollOffset, 
+containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, 
 // Unused but part of UseListResult interface
 getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }) => {
     return (jsx("div", { className: cvaListContainer({
@@ -3595,10 +3595,12 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
                         type: "skeleton",
                         ...DEFAULT_SKELETON_LIST_ITEM_PROPS,
                     };
-                    const hasHeader = rows.some(r => r.type === "header");
-                    const dataRowCount = rows.filter(r => r.type === "data").length;
-                    const loaderIndex = row.virtualRow.index - dataRowCount - (hasHeader ? 1 : 0);
-                    const shouldShowLoader = loadingConfig.type !== "none" && loaderIndex < (loadingConfig.initialLoadingCount ?? 10);
+                    // Use the total data count from useList, not visible rows (which are virtualized)
+                    const hasHeaderRow = !!header;
+                    const dataStartIndex = hasHeaderRow ? 1 : 0;
+                    const totalDataRows = dataStartIndex + count;
+                    const loaderIndex = row.virtualRow.index - totalDataRows;
+                    const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
                     return (jsx("li", { ...listItemProps, children: shouldShowLoader ? jsx(ListLoadingIndicator, { ...loadingConfig }) : null }, key));
                 }
                 // Render header row
@@ -3610,6 +3612,11 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
             }) }) }));
 };
 
+const DEFAULT_LOADING_INDICATOR_CONFIG = {
+    type: "skeleton",
+    initialLoadingCount: 10,
+    scrollLoadingCount: 3,
+};
 /**
  * A hook for managing virtualized list state and behavior.
  *
@@ -3642,7 +3649,7 @@ getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset:
  * );
  * ```
  */
-const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
+const useList = ({ count, pagination, header, getItem, loadingIndicator = DEFAULT_LOADING_INDICATOR_CONFIG, onRowClick, onChange, estimateItemSize, estimateHeaderSize, overscan, }) => {
     const containerRef = useRef(null);
     const listRef = useRef(null);
     const rowRefsMap = useRef(new Map());
@@ -3653,8 +3660,6 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     const totalDataRows = dataStartIndex + dataCount;
     // Calculate how many loading rows we need
     const getLoadingRowsCount = useCallback(() => {
-        if (!loadingIndicator)
-            return 0;
         if (pagination?.isLoading === false)
             return 0;
         const { type: loadingIndicatorType } = loadingIndicator;
@@ -3675,15 +3680,49 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
             }
         }
     }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
-    const totalRowCount = useMemo(() => totalDataRows + (pagination?.isLoading === true ? getLoadingRowsCount() : 0), [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
+    // Helper to determine if a specific loader index should be shown
+    const shouldShowLoaderAtIndex = useCallback((loaderIndex) => {
+        if (pagination?.isLoading === false)
+            return false;
+        const { type: loadingIndicatorType } = loadingIndicator;
+        let result;
+        switch (loadingIndicatorType) {
+            case "none":
+                result = false;
+                break;
+            case "spinner":
+                result = loaderIndex === 0;
+                break;
+            case "custom":
+            case "skeleton": {
+                const isInitialLoading = !pagination?.pageInfo;
+                const initialCount = loadingIndicator.initialLoadingCount ?? 10;
+                const scrollCount = loadingIndicator.scrollLoadingCount ?? 3;
+                const maxCount = isInitialLoading ? initialCount : scrollCount;
+                result = loaderIndex < maxCount;
+                break;
+            }
+            default: {
+                throw new Error(`${loadingIndicatorType} is not known`);
+            }
+        }
+        return result;
+    }, [loadingIndicator, pagination?.isLoading, pagination?.pageInfo]);
+    const totalRowCount = useMemo(() => {
+        // Only add the exact number of loading rows we want to show
+        const loadingRows = pagination?.isLoading === true ? getLoadingRowsCount() : 0;
+        const total = totalDataRows + loadingRows;
+        return total;
+    }, [totalDataRows, pagination?.isLoading, getLoadingRowsCount]);
     // Estimate size for all rows (header, data, loading)
     const estimateSize = useCallback((index) => {
         // Loading rows
         if (index >= totalDataRows) {
             const loaderIndex = index - totalDataRows;
-            const shouldShowLoader = pagination?.isLoading === true && loaderIndex < getLoadingRowsCount();
+            const shouldShowLoader = shouldShowLoaderAtIndex(loaderIndex);
+            const estimatedHeight = shouldShowLoader ? estimateItemSize(0) : 0;
             // Empty loader rows should be estimated at 0 height to prevent blank space
-            return shouldShowLoader ? estimateItemSize(0) : 0;
+            return estimatedHeight;
         }
         // Header row (if exists, it's always at index 0)
         if (hasHeader && index === 0) {
@@ -3693,15 +3732,7 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         // Data rows - calculate the data index
         const dataIndex = index - dataStartIndex;
         return estimateItemSize(dataIndex);
-    }, [
-        estimateItemSize,
-        estimateHeaderSize,
-        totalDataRows,
-        pagination?.isLoading,
-        getLoadingRowsCount,
-        hasHeader,
-        dataStartIndex,
-    ]);
+    }, [estimateItemSize, estimateHeaderSize, totalDataRows, shouldShowLoaderAtIndex, hasHeader, dataStartIndex]);
     // Set up virtualization
     const virtualizer = useInfiniteScroll({
         pagination: pagination ?? noPagination,
@@ -3733,7 +3764,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
     }, []);
     // Transform virtual items into typed rows
     const rows = useMemo(() => {
-        return virtualizer.getVirtualItems().map((virtualRow) => {
+        const virtualItems = virtualizer.getVirtualItems();
+        return virtualItems.map((virtualRow) => {
             const { index } = virtualRow;
             // Determine row type
             const isLoaderRow = index >= totalDataRows;
@@ -3800,6 +3832,8 @@ const useList = ({ count, pagination, header, getItem, loadingIndicator, onRowCl
         getListItemProps,
         header,
         loadingIndicator,
+        shouldShowLoaderAtIndex,
+        count,
     };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.9.20",
+  "version": "1.9.21",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/List/List.d.ts

@@ -100,4 +100,4 @@ export interface ListProps<TItem = unknown> extends CommonProps, UseListResult<T
  * );
  * ```
  */
-export declare const List: <TItem = unknown>({ children, className, dataTestId, topSeparatorOnScroll, separator, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, isScrolling, scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;
+export declare const List: <TItem = unknown>({ children, className, dataTestId, topSeparatorOnScroll, separator, containerRef, listRef, rows, getListItemProps, header, loadingIndicator, shouldShowLoaderAtIndex, count, isScrolling, scrollOffset, getTotalSize: _getTotalSize, getVirtualItems: _getVirtualItems, scrollToOffset: _scrollToOffset, scrollToIndex: _scrollToIndex, measure: _measure, }: ListProps<TItem>) => ReactElement;

package/src/components/List/useList.d.ts

@@ -121,16 +121,20 @@ export interface UseListResult<TItem> extends Pick<Virtualizer<HTMLDivElement, H
     /** Reference to attach to the list */
     listRef: RefObject<HTMLUListElement | null>;
     /** Array of row data to render */
-    rows: Array<ListRow<TItem>>;
+    readonly rows: ReadonlyArray<ListRow<TItem>>;
     /** Helper to create list item props for a given row */
-    getListItemProps: (row: ListRow<TItem>, options: {
+    readonly getListItemProps: (row: ListRow<TItem>, options: {
         className: string;
         onClick?: () => void;
     }) => VirtualizationListItemProps;
     /** Header element (if provided) */
-    header?: ReactElement;
+    readonly header?: ReactElement;
     /** Loading indicator configuration */
-    loadingIndicator?: ListLoadingIndicatorProps;
+    readonly loadingIndicator?: ListLoadingIndicatorProps;
+    /** Helper to determine if a specific loader index should be shown */
+    readonly shouldShowLoaderAtIndex: (loaderIndex: number) => boolean;
+    /** Total number of data items (for consistent calculations) */
+    readonly count: number;
 }
 /**
  * A hook for managing virtualized list state and behavior.