@datarobot/design-system 28.8.4 → 28.9.0

package/cjs/file-tree/file-tree-loading.d.ts

@@ -0,0 +1,8 @@
+type FileTreeLoadingProps = {
+    loadingPattern: number[];
+    rootClass?: string;
+    rootTestId?: string;
+    branchTestId?: string;
+};
+export declare function FileTreeLoading({ loadingPattern, rootClass, rootTestId, branchTestId, }: FileTreeLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/file-tree/file-tree-loading.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FileTreeLoading = FileTreeLoading;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _skeleton = require("../skeleton");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getRandomWidth() {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (window.IS_SNAPSHOT_ENV) {
+    return 70;
+  }
+  return Math.round(Math.random() * 3 + 5) * 10; // generates random width between 60% and 80%
+}
+function FileTreeLoading({
+  loadingPattern,
+  rootClass,
+  rootTestId,
+  branchTestId
+}) {
+  const renderSkeletonItem = (level, index) => {
+    const width = level === 0 ? '85%' : `${getRandomWidth()}%`; // generates random width between 60% and 80%
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      className: "branch-item",
+      "test-id": "file-tree-skeleton-item",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "item",
+        style: {
+          paddingLeft: `${level * 20}px`
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "file-tree-item-content",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: "item-label",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: "item-icon",
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+                type: _skeleton.SKELETON_TYPES.CIRCULAR,
+                width: 16,
+                height: 16,
+                testId: `file-tree-skeleton-${level}-${index}-icon`
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+              type: _skeleton.SKELETON_TYPES.TEXT,
+              width: width,
+              height: 16,
+              testId: `file-tree-skeleton-${level}-${index}`
+            })]
+          })
+        })
+      })
+    }, `skeleton-${level}-${index}`);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('file-tree-root', rootClass),
+    "test-id": rootTestId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+      className: "branch",
+      "test-id": `${branchTestId}-skeleton`,
+      children: loadingPattern.map((level, index) => {
+        return renderSkeletonItem(level, index);
+      })
+    })
+  });
+}

package/cjs/file-tree/file-tree.d.ts

@@ -53,9 +53,17 @@ export type FileTreeProps = {
      * Optional row size prop that dictates action button size.
      */
     rowSize?: ButtonSizeType;
+    /**
+     * Shows skeleton isLoading state when true
+     */
+    isLoading?: boolean;
+    /**
+     * Optional loading pattern to use for skeleton loading state. It's an array of levels to render. Default is [0, 1, 1, 2, 0]
+     */
+    loadingPattern?: number[];
 };
 /** Displays a browsable file tree navigation component
     @midnight-gray-supported
     @alpine-light-supported
  */
-export declare const FileTree: ({ fileTree, folderComponentProps, fileComponentProps, rootClass, fileTestId, folderTestId, rowSize, FileComponent, FolderComponent, ItemContentComponent, rootTestId, branchTestId, itemTestId, disabled, sortingStrategy, }: FileTreeProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FileTree: ({ fileTree, folderComponentProps, fileComponentProps, rootClass, fileTestId, folderTestId, rowSize, FileComponent, FolderComponent, ItemContentComponent, rootTestId, branchTestId, itemTestId, disabled, sortingStrategy, isLoading, loadingPattern, }: FileTreeProps) => import("react/jsx-runtime").JSX.Element | null;

package/cjs/file-tree/file-tree.js

@@ -32,11 +32,21 @@ const FileTree = ({
   branchTestId = 'file-tree-branch',
   itemTestId = 'file-tree-item-wrapper',
   disabled = false,
-  sortingStrategy = value => value
+  sortingStrategy = value => value,
+  isLoading = false,
+  loadingPattern = [0, 1, 1, 2, 0]
 }) => {
   const adapter = (0, _react.useMemo)(() => (0, _fileTreeNavigationAdapter.getFileTreeNavigationAdapter)({
     isExpandedByDefault: !!folderComponentProps?.expand
   }), [!!folderComponentProps?.expand]);
+  if (isLoading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FileTreeLoading, {
+      loadingPattern: loadingPattern,
+      rootClass: rootClass,
+      rootTestId: rootTestId,
+      branchTestId: branchTestId
+    });
+  }
   if (!fileTree.length) {
     return null;
   }

package/cjs/file-tree/index.d.ts

@@ -5,6 +5,7 @@ import FileTreeFolderComponent, { FileTreeFolderComponentProps } from './file-tr
 import FileTreeItem, { FileTreeItemProps } from './file-tree-item';
 import FileTreeItemActions, { FileTreeItemActionsActions, FileTreeItemActionsProps } from './file-tree-item-actions';
 import FileTreeItemContent, { FileTreeItemContentComponent, FileTreeItemContentProps, FileTreeItemContentType, FileNodeType } from './file-tree-item-content';
+import { FileTreeLoading } from './file-tree-loading';
 import * as compareUtils from './compareUtils';
-export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, };
+export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, FileTreeLoading, };
 export type { FileTreeItemContentComponent, FileTreeFileComponentProps, FileTreeFolderComponentProps, FileTreeItemProps, FileTreeProps, FileTreeItemActionsActions, FileTreeItemActionsProps, FileTreeItemContentType, FileTreeItemContentProps, FileNodeType, FileTreeType, };

package/cjs/file-tree/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "FileTreeItemContent", {
     return _fileTreeItemContent.default;
   }
 });
+Object.defineProperty(exports, "FileTreeLoading", {
+  enumerable: true,
+  get: function () {
+    return _fileTreeLoading.FileTreeLoading;
+  }
+});
 Object.defineProperty(exports, "cleanUpPath", {
   enumerable: true,
   get: function () {
@@ -65,6 +71,7 @@ var _fileTreeFolder = _interopRequireDefault(require("./file-tree-folder"));
 var _fileTreeItem = _interopRequireDefault(require("./file-tree-item"));
 var _fileTreeItemActions = _interopRequireDefault(require("./file-tree-item-actions"));
 var _fileTreeItemContent = _interopRequireDefault(require("./file-tree-item-content"));
+var _fileTreeLoading = require("./file-tree-loading");
 var compareUtils = _interopRequireWildcard(require("./compareUtils"));
 exports.compareUtils = compareUtils;
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }

package/cjs/table-react/components/table.js

@@ -188,7 +188,7 @@ function Table({
       setColumnSizing(touchedResizedColumns);
     }
   }, [width]);
-  const tableData = (0, _useLoading.useLoading)(isLoading, afterLoading, data, pagination?.pageSize || loadingRowCount);
+  const tableData = (0, _useLoading.useLoading)(isLoading, afterLoading, data, loadingRowCount || pagination?.pageSize);
   const isEmpty = tableData.length === 0 && !errorMessage;
   const tableModel = (0, _reactTable.useReactTable)({
     data: tableData,

package/cjs/table-react/table-react.d.ts

@@ -136,7 +136,6 @@ export type TableReactPropsType<TData, TMeta> = {
  * New configurable table that uses [@tanstack/react-table](https://tanstack.com/table) under the hood.
  * Also check the full page table demo [Here](/Controlled Table)
  * @midnight-gray-supported
- * @uxr-only-supported
  * @alpine-light-supported
  */
 export default function TableReact<IData, IMeta>({ tableContainerTestId, width: defaultWidth, state, handlers, settings, components, classes, ...props }: TableReactPropsType<IData, IMeta>): import("react/jsx-runtime").JSX.Element;

package/cjs/table-react/table-react.js

@@ -13,7 +13,6 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  * New configurable table that uses [@tanstack/react-table](https://tanstack.com/table) under the hood.
  * Also check the full page table demo [Here](/Controlled Table)
  * @midnight-gray-supported
- * @uxr-only-supported
  * @alpine-light-supported
  */
 function TableReact({

package/esm/file-tree/file-tree-loading.d.ts

@@ -0,0 +1,8 @@
+type FileTreeLoadingProps = {
+    loadingPattern: number[];
+    rootClass?: string;
+    rootTestId?: string;
+    branchTestId?: string;
+};
+export declare function FileTreeLoading({ loadingPattern, rootClass, rootTestId, branchTestId, }: FileTreeLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/esm/file-tree/file-tree-loading.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import classNames from 'classnames';
+import { Skeleton, SKELETON_TYPES } from '../skeleton';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function getRandomWidth() {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (window.IS_SNAPSHOT_ENV) {
+    return 70;
+  }
+  return Math.round(Math.random() * 3 + 5) * 10; // generates random width between 60% and 80%
+}
+export function FileTreeLoading({
+  loadingPattern,
+  rootClass,
+  rootTestId,
+  branchTestId
+}) {
+  const renderSkeletonItem = (level, index) => {
+    const width = level === 0 ? '85%' : `${getRandomWidth()}%`; // generates random width between 60% and 80%
+
+    return /*#__PURE__*/_jsx("li", {
+      className: "branch-item",
+      "test-id": "file-tree-skeleton-item",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "item",
+        style: {
+          paddingLeft: `${level * 20}px`
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "file-tree-item-content",
+          children: /*#__PURE__*/_jsxs("div", {
+            className: "item-label",
+            children: [/*#__PURE__*/_jsx("div", {
+              className: "item-icon",
+              children: /*#__PURE__*/_jsx(Skeleton, {
+                type: SKELETON_TYPES.CIRCULAR,
+                width: 16,
+                height: 16,
+                testId: `file-tree-skeleton-${level}-${index}-icon`
+              })
+            }), /*#__PURE__*/_jsx(Skeleton, {
+              type: SKELETON_TYPES.TEXT,
+              width: width,
+              height: 16,
+              testId: `file-tree-skeleton-${level}-${index}`
+            })]
+          })
+        })
+      })
+    }, `skeleton-${level}-${index}`);
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames('file-tree-root', rootClass),
+    "test-id": rootTestId,
+    children: /*#__PURE__*/_jsx("ul", {
+      className: "branch",
+      "test-id": `${branchTestId}-skeleton`,
+      children: loadingPattern.map((level, index) => {
+        return renderSkeletonItem(level, index);
+      })
+    })
+  });
+}

package/esm/file-tree/file-tree.d.ts

@@ -53,9 +53,17 @@ export type FileTreeProps = {
      * Optional row size prop that dictates action button size.
      */
     rowSize?: ButtonSizeType;
+    /**
+     * Shows skeleton isLoading state when true
+     */
+    isLoading?: boolean;
+    /**
+     * Optional loading pattern to use for skeleton loading state. It's an array of levels to render. Default is [0, 1, 1, 2, 0]
+     */
+    loadingPattern?: number[];
 };
 /** Displays a browsable file tree navigation component
     @midnight-gray-supported
     @alpine-light-supported
  */
-export declare const FileTree: ({ fileTree, folderComponentProps, fileComponentProps, rootClass, fileTestId, folderTestId, rowSize, FileComponent, FolderComponent, ItemContentComponent, rootTestId, branchTestId, itemTestId, disabled, sortingStrategy, }: FileTreeProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FileTree: ({ fileTree, folderComponentProps, fileComponentProps, rootClass, fileTestId, folderTestId, rowSize, FileComponent, FolderComponent, ItemContentComponent, rootTestId, branchTestId, itemTestId, disabled, sortingStrategy, isLoading, loadingPattern, }: FileTreeProps) => import("react/jsx-runtime").JSX.Element | null;

package/esm/file-tree/file-tree.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { TreeNavigationProvider } from '../hooks/use-tree-navigation';
 import { FILE_TYPE } from './file-tree-adapter';
 import { getFileTreeNavigationAdapter } from './file-tree-navigation-adapter';
-import { FileTreeFolderComponent, FileTreeFileComponent, FileTreeItemContent } from '.';
+import { FileTreeFolderComponent, FileTreeFileComponent, FileTreeItemContent, FileTreeLoading } from '.';
 import { jsx as _jsx } from "react/jsx-runtime";
 /** Displays a browsable file tree navigation component
     @midnight-gray-supported
@@ -24,11 +24,21 @@ export const FileTree = ({
   branchTestId = 'file-tree-branch',
   itemTestId = 'file-tree-item-wrapper',
   disabled = false,
-  sortingStrategy = value => value
+  sortingStrategy = value => value,
+  isLoading = false,
+  loadingPattern = [0, 1, 1, 2, 0]
 }) => {
   const adapter = useMemo(() => getFileTreeNavigationAdapter({
     isExpandedByDefault: !!folderComponentProps?.expand
   }), [!!folderComponentProps?.expand]);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(FileTreeLoading, {
+      loadingPattern: loadingPattern,
+      rootClass: rootClass,
+      rootTestId: rootTestId,
+      branchTestId: branchTestId
+    });
+  }
   if (!fileTree.length) {
     return null;
   }

package/esm/file-tree/index.d.ts

@@ -5,6 +5,7 @@ import FileTreeFolderComponent, { FileTreeFolderComponentProps } from './file-tr
 import FileTreeItem, { FileTreeItemProps } from './file-tree-item';
 import FileTreeItemActions, { FileTreeItemActionsActions, FileTreeItemActionsProps } from './file-tree-item-actions';
 import FileTreeItemContent, { FileTreeItemContentComponent, FileTreeItemContentProps, FileTreeItemContentType, FileNodeType } from './file-tree-item-content';
+import { FileTreeLoading } from './file-tree-loading';
 import * as compareUtils from './compareUtils';
-export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, };
+export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, FileTreeLoading, };
 export type { FileTreeItemContentComponent, FileTreeFileComponentProps, FileTreeFolderComponentProps, FileTreeItemProps, FileTreeProps, FileTreeItemActionsActions, FileTreeItemActionsProps, FileTreeItemContentType, FileTreeItemContentProps, FileNodeType, FileTreeType, };

package/esm/file-tree/index.js

@@ -5,5 +5,6 @@ import FileTreeFolderComponent from './file-tree-folder';
 import FileTreeItem from './file-tree-item';
 import FileTreeItemActions from './file-tree-item-actions';
 import FileTreeItemContent from './file-tree-item-content';
+import { FileTreeLoading } from './file-tree-loading';
 import * as compareUtils from './compareUtils';
-export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils };
+export { FileTreeFileComponent, FileTreeFolderComponent, FileTree, FileTreeItem, FileTreeItemContent, FileTreeItemActions, FILE_TYPE, fileTreeAdapter, cleanUpPath, compareUtils, FileTreeLoading };

package/esm/table-react/components/table.js

@@ -180,7 +180,7 @@ export function Table({
       setColumnSizing(touchedResizedColumns);
     }
   }, [width]);
-  const tableData = useLoading(isLoading, afterLoading, data, pagination?.pageSize || loadingRowCount);
+  const tableData = useLoading(isLoading, afterLoading, data, loadingRowCount || pagination?.pageSize);
   const isEmpty = tableData.length === 0 && !errorMessage;
   const tableModel = useReactTable({
     data: tableData,

package/esm/table-react/table-react.d.ts

@@ -136,7 +136,6 @@ export type TableReactPropsType<TData, TMeta> = {
  * New configurable table that uses [@tanstack/react-table](https://tanstack.com/table) under the hood.
  * Also check the full page table demo [Here](/Controlled Table)
  * @midnight-gray-supported
- * @uxr-only-supported
  * @alpine-light-supported
  */
 export default function TableReact<IData, IMeta>({ tableContainerTestId, width: defaultWidth, state, handlers, settings, components, classes, ...props }: TableReactPropsType<IData, IMeta>): import("react/jsx-runtime").JSX.Element;

package/esm/table-react/table-react.js

@@ -6,7 +6,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * New configurable table that uses [@tanstack/react-table](https://tanstack.com/table) under the hood.
  * Also check the full page table demo [Here](/Controlled Table)
  * @midnight-gray-supported
- * @uxr-only-supported
  * @alpine-light-supported
  */
 export default function TableReact({

package/js/bundle/bundle.js

@@ -55000,6 +55000,80 @@ FileTreeItem.displayName = 'FileTreeItem';
 
 /***/ }),
 
+/***/ "./src/components/file-tree/file-tree-loading.tsx":
+/*!********************************************************!*\
+  !*** ./src/components/file-tree/file-tree-loading.tsx ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   FileTreeLoading: () => (/* binding */ FileTreeLoading)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! classnames */ "./node_modules/classnames/index.js");
+/* harmony import */ var classnames__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _skeleton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../skeleton */ "./src/components/skeleton/index.ts");
+
+
+
+function getRandomWidth() {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  if (window.IS_SNAPSHOT_ENV) {
+    return 70;
+  }
+  return Math.round(Math.random() * 3 + 5) * 10; // generates random width between 60% and 80%
+}
+function FileTreeLoading(_ref) {
+  var loadingPattern = _ref.loadingPattern,
+    rootClass = _ref.rootClass,
+    rootTestId = _ref.rootTestId,
+    branchTestId = _ref.branchTestId;
+  var renderSkeletonItem = function renderSkeletonItem(level, index) {
+    var width = level === 0 ? '85%' : "".concat(getRandomWidth(), "%"); // generates random width between 60% and 80%
+
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
+      key: "skeleton-".concat(level, "-").concat(index),
+      className: "branch-item",
+      "test-id": "file-tree-skeleton-item"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "item",
+      style: {
+        paddingLeft: "".concat(level * 20, "px")
+      }
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "file-tree-item-content"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "item-label"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+      className: "item-icon"
+    }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_skeleton__WEBPACK_IMPORTED_MODULE_2__.Skeleton, {
+      type: _skeleton__WEBPACK_IMPORTED_MODULE_2__.SKELETON_TYPES.CIRCULAR,
+      width: 16,
+      height: 16,
+      testId: "file-tree-skeleton-".concat(level, "-").concat(index, "-icon")
+    })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_skeleton__WEBPACK_IMPORTED_MODULE_2__.Skeleton, {
+      type: _skeleton__WEBPACK_IMPORTED_MODULE_2__.SKELETON_TYPES.TEXT,
+      width: width,
+      height: 16,
+      testId: "file-tree-skeleton-".concat(level, "-").concat(index)
+    })))));
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('file-tree-root', rootClass),
+    "test-id": rootTestId
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {
+    className: "branch",
+    "test-id": "".concat(branchTestId, "-skeleton")
+  }, loadingPattern.map(function (level, index) {
+    return renderSkeletonItem(level, index);
+  })));
+}
+
+/***/ }),
+
 /***/ "./src/components/file-tree/file-tree-navigation-adapter.ts":
 /*!******************************************************************!*\
   !*** ./src/components/file-tree/file-tree-navigation-adapter.ts ***!
@@ -55120,12 +55194,24 @@ var FileTree = function FileTree(_ref) {
     _ref$sortingStrategy = _ref.sortingStrategy,
     sortingStrategy = _ref$sortingStrategy === void 0 ? function (value) {
       return value;
-    } : _ref$sortingStrategy;
+    } : _ref$sortingStrategy,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$loadingPattern = _ref.loadingPattern,
+    loadingPattern = _ref$loadingPattern === void 0 ? [0, 1, 1, 2, 0] : _ref$loadingPattern;
   var adapter = (0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)(function () {
     return (0,_file_tree_navigation_adapter__WEBPACK_IMPORTED_MODULE_4__.getFileTreeNavigationAdapter)({
       isExpandedByDefault: !!(folderComponentProps !== null && folderComponentProps !== void 0 && folderComponentProps.expand)
     });
   }, [!!(folderComponentProps !== null && folderComponentProps !== void 0 && folderComponentProps.expand)]);
+  if (isLoading) {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(___WEBPACK_IMPORTED_MODULE_5__.FileTreeLoading, {
+      loadingPattern: loadingPattern,
+      rootClass: rootClass,
+      rootTestId: rootTestId,
+      branchTestId: branchTestId
+    });
+  }
   if (!fileTree.length) {
     return null;
   }
@@ -55200,8 +55286,9 @@ var FileTree = function FileTree(_ref) {
 /* harmony export */   FileTreeItem: () => (/* reexport safe */ _file_tree_item__WEBPACK_IMPORTED_MODULE_4__["default"]),
 /* harmony export */   FileTreeItemActions: () => (/* reexport safe */ _file_tree_item_actions__WEBPACK_IMPORTED_MODULE_5__["default"]),
 /* harmony export */   FileTreeItemContent: () => (/* reexport safe */ _file_tree_item_content__WEBPACK_IMPORTED_MODULE_6__["default"]),
+/* harmony export */   FileTreeLoading: () => (/* reexport safe */ _file_tree_loading__WEBPACK_IMPORTED_MODULE_7__.FileTreeLoading),
 /* harmony export */   cleanUpPath: () => (/* reexport safe */ _file_tree_adapter__WEBPACK_IMPORTED_MODULE_1__.cleanUpPath),
-/* harmony export */   compareUtils: () => (/* reexport module object */ _compareUtils__WEBPACK_IMPORTED_MODULE_7__),
+/* harmony export */   compareUtils: () => (/* reexport module object */ _compareUtils__WEBPACK_IMPORTED_MODULE_8__),
 /* harmony export */   fileTreeAdapter: () => (/* reexport safe */ _file_tree_adapter__WEBPACK_IMPORTED_MODULE_1__.fileTreeAdapter)
 /* harmony export */ });
 /* harmony import */ var _file_tree__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./file-tree */ "./src/components/file-tree/file-tree.tsx");
@@ -55211,7 +55298,9 @@ var FileTree = function FileTree(_ref) {
 /* harmony import */ var _file_tree_item__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./file-tree-item */ "./src/components/file-tree/file-tree-item.tsx");
 /* harmony import */ var _file_tree_item_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./file-tree-item-actions */ "./src/components/file-tree/file-tree-item-actions.tsx");
 /* harmony import */ var _file_tree_item_content__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./file-tree-item-content */ "./src/components/file-tree/file-tree-item-content.tsx");
-/* harmony import */ var _compareUtils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./compareUtils */ "./src/components/file-tree/compareUtils.ts");
+/* harmony import */ var _file_tree_loading__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./file-tree-loading */ "./src/components/file-tree/file-tree-loading.tsx");
+/* harmony import */ var _compareUtils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./compareUtils */ "./src/components/file-tree/compareUtils.ts");
+
 
 
 
@@ -63903,6 +63992,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   FileTreeItem: () => (/* reexport safe */ _file_tree__WEBPACK_IMPORTED_MODULE_36__.FileTreeItem),
 /* harmony export */   FileTreeItemActions: () => (/* reexport safe */ _file_tree__WEBPACK_IMPORTED_MODULE_36__.FileTreeItemActions),
 /* harmony export */   FileTreeItemContent: () => (/* reexport safe */ _file_tree__WEBPACK_IMPORTED_MODULE_36__.FileTreeItemContent),
+/* harmony export */   FileTreeLoading: () => (/* reexport safe */ _file_tree__WEBPACK_IMPORTED_MODULE_36__.FileTreeLoading),
 /* harmony export */   FileUpload: () => (/* reexport safe */ _file_upload__WEBPACK_IMPORTED_MODULE_37__.FileUpload),
 /* harmony export */   FileUploader: () => (/* reexport safe */ _file_uploader__WEBPACK_IMPORTED_MODULE_38__.FileUploader),
 /* harmony export */   FilesUploadArea: () => (/* reexport safe */ _files_upload_area__WEBPACK_IMPORTED_MODULE_39__.FilesUploadArea),
@@ -76640,7 +76730,7 @@ function Table(_ref) {
       setColumnSizing(touchedResizedColumns);
     }
   }, [width]);
-  var tableData = (0,_hooks_useLoading__WEBPACK_IMPORTED_MODULE_12__.useLoading)(isLoading, afterLoading, data, (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize) || loadingRowCount);
+  var tableData = (0,_hooks_useLoading__WEBPACK_IMPORTED_MODULE_12__.useLoading)(isLoading, afterLoading, data, loadingRowCount || (pagination === null || pagination === void 0 ? void 0 : pagination.pageSize));
   var isEmpty = tableData.length === 0 && !errorMessage;
   var tableModel = (0,_tanstack_react_table__WEBPACK_IMPORTED_MODULE_20__.useReactTable)({
     data: tableData,
@@ -77575,7 +77665,6 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
  * New configurable table that uses [@tanstack/react-table](https://tanstack.com/table) under the hood.
  * Also check the full page table demo [Here](/Controlled Table)
  * @midnight-gray-supported
- * @uxr-only-supported
  * @alpine-light-supported
  */
 function TableReact(_ref) {