@trackunit/react-components 0.1.296 → 0.1.297

package/index.cjs.js

@@ -4523,8 +4523,10 @@ const cvaVirtualizedListItem = cssClassVarianceUtilities.cvaMerge(["absolute", "
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", }) => {
     var _a;
     const containerRef = React.useRef(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = reactTablePagination.useInfiniteScroll({
@@ -4539,7 +4541,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 const isLoaderRow = virtualRow.index > count - 1;
                 return (jsxRuntime.jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [loadingIndicator === "spinner" && jsxRuntime.jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsxRuntime.jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/index.esm.js

@@ -4492,8 +4492,10 @@ const cvaVirtualizedListItem = cvaMerge(["absolute", "top-0", "left-0", "w-full"
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", }) => {
+const VirtualizedList = ({ count, rowHeight = 40, pagination, children, className, dataTestId, separator = "none", loadingIndicator = "spinner", skeletonLinesHeight = "2rem", }) => {
     var _a;
     const containerRef = useRef(null);
     const { fetchMoreOnBottomReached, getVirtualItems, getTotalSize, measureElement } = useInfiniteScroll({
@@ -4508,7 +4510,7 @@ const VirtualizedList = ({ count, rowHeight = 40, pagination, children, classNam
                 const isLoaderRow = virtualRow.index > count - 1;
                 return (jsx("li", { className: cvaVirtualizedListItem({ separator }), "data-index": virtualRow.index, ref: measureElement, style: {
                         transform: `translateY(${virtualRow.start}px)`,
-                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" })) : null) : (children(virtualRow.index)) }, virtualRow.key));
+                    }, children: isLoaderRow ? ((pagination === null || pagination === void 0 ? void 0 : pagination.isLoading) ? (jsxs(Fragment, { children: [loadingIndicator === "spinner" && jsx(Spinner, { centering: "horizontally", containerClassName: "p-4" }), loadingIndicator === "skeletonLines" && (jsx(SkeletonLines, { height: skeletonLinesHeight, lines: 3, width: "full" }))] })) : null) : (children(virtualRow.index)) }, virtualRow.key));
             }) }) }));
 };
 

package/package.json

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

package/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -4,12 +4,15 @@ import { RelayPagination } from "@trackunit/react-table-pagination";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
 type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
+type LoadingIndicator = "spinner" | "skeletonLines";
 export interface VirtualizedListProps extends CommonProps {
     count: number;
     rowHeight?: number;
     pagination?: RelayPagination;
     children: (index: number) => JSX.Element;
     separator?: Separator;
+    loadingIndicator?: LoadingIndicator;
+    skeletonLinesHeight?: string;
 }
 /**
  * Render a performant virtualized list of items. Optionally with infinite scrolling.
@@ -19,6 +22,8 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, }: VirtualizedListProps) => JSX.Element;
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, }: VirtualizedListProps) => JSX.Element;
 export {};