@equinor/apollo-components 3.4.0-beta.1 → 3.4.0-skeleton.0

package/dist/index.d.ts

@@ -179,7 +179,15 @@ interface DataTableProps<T> {
         padding?: string;
     };
     tableContainerProps?: HTMLPropsRef<HTMLDivElement>;
-    infiniteScroll?: InfiniteScrollConfig;
+    infiniteScroll?: {
+        /** Called on scroll below offset. */
+        onBottomScroll: () => void;
+        /** Pixels above bottom. Defines when the onBottomScroll should be called. Defaults to `300`. */
+        offset?: number;
+        /** Displays loading row on the bottom of the table */
+        isFetchingNextPage?: boolean;
+        isLastPage?: boolean;
+    };
 }
 declare type ControlledState<T> = {
     state?: T;

package/dist/index.js

@@ -3073,7 +3073,7 @@ function TableHeader({ table, sticky }) {
 
 // src/DataTable/DataTable.tsx
 var import_react_table3 = require("@tanstack/react-table");
-var import_react7 = require("react");
+var import_react9 = require("react");
 var import_styled_components16 = __toESM(require("styled-components"));
 
 // src/DataTable/components/BasicTable.tsx
@@ -3081,20 +3081,43 @@ var import_eds_core_react15 = require("@equinor/eds-core-react");
 
 // src/DataTable/components/PlaceholderRow.tsx
 var import_eds_core_react12 = require("@equinor/eds-core-react");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_react4 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var PlaceholderTextWrapper = import_styled_components11.default.div`
-  display: flex;
-  justify-content: center;
-`;
-function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, { colSpan: 100, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.DotProgress, { color: "primary" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Typography, { children: "No data available" }) }) }) });
+function PlaceholderRow({ children }) {
+  const [width, setWidth] = (0, import_react4.useState)();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_eds_core_react12.Table.Row,
+    {
+      ref: (node) => {
+        var _a, _b, _c;
+        if (!node)
+          return;
+        setWidth((_c = (_b = (_a = node.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientWidth);
+      },
+      style: { pointerEvents: "none" },
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_eds_core_react12.Table.Cell, { colSpan: 100, style: { padding: 0 }, children: width && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        "div",
+        {
+          style: {
+            width,
+            display: "flex",
+            justifyContent: "center",
+            position: "sticky",
+            left: 0,
+            height: "100%",
+            alignItems: "center"
+          },
+          children
+        }
+      ) })
+    }
+  );
 }
 
 // src/DataTable/components/TableBody.tsx
 var import_eds_core_react13 = require("@equinor/eds-core-react");
-var import_styled_components12 = __toESM(require("styled-components"));
-var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.Table.Body)`
+var import_styled_components11 = __toESM(require("styled-components"));
+var TableBody = (0, import_styled_components11.default)(import_eds_core_react13.Table.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
@@ -3102,7 +3125,7 @@ var TableBody = (0, import_styled_components12.default)(import_eds_core_react13.
 
 // src/DataTable/components/TableRow.tsx
 var import_eds_core_react14 = require("@equinor/eds-core-react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function TableRow({
   row,
@@ -3145,7 +3168,7 @@ function TableRow({
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = (0, import_styled_components13.default)(import_eds_core_react14.Table.Row)`
+var StyledTableRow = (0, import_styled_components12.default)(import_eds_core_react14.Table.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3178,18 +3201,18 @@ function BasicTable({
 // src/DataTable/components/DataTableHeader.tsx
 var import_eds_core_react17 = require("@equinor/eds-core-react");
 var import_eds_icons7 = require("@equinor/eds-icons");
-var import_styled_components15 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 
 // src/DataTable/filters/DebouncedInput.tsx
 var import_eds_core_react16 = require("@equinor/eds-core-react");
 var import_eds_icons6 = require("@equinor/eds-icons");
-var import_react4 = require("react");
-var import_styled_components14 = __toESM(require("styled-components"));
+var import_react5 = require("react");
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var Wrapper3 = import_styled_components14.default.div`
+var Wrapper3 = import_styled_components13.default.div`
   width: 200px;
 `;
-var CloseButton = (0, import_styled_components14.default)(import_eds_core_react16.Button)`
+var CloseButton = (0, import_styled_components13.default)(import_eds_core_react16.Button)`
   width: 24px;
   height: 24px;
 `;
@@ -3205,11 +3228,11 @@ function DebouncedInput(_a) {
     "icon",
     "debounce"
   ]);
-  const [value, setValue] = (0, import_react4.useState)(initialValue);
-  (0, import_react4.useEffect)(() => {
+  const [value, setValue] = (0, import_react5.useState)(initialValue);
+  (0, import_react5.useEffect)(() => {
     setValue(initialValue);
   }, [initialValue]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     const timeout = setTimeout(() => {
       onChange(value);
     }, debounce);
@@ -3238,14 +3261,14 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 
 // src/DataTable/components/DataTableHeader.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var TableBannerWrapper = import_styled_components15.default.div`
+var TableBannerWrapper = import_styled_components14.default.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.padding || "1rem"};
 `;
-var FilterContainer = import_styled_components15.default.div`
+var FilterContainer = import_styled_components14.default.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -3289,6 +3312,8 @@ function TableBanner({
 // src/DataTable/components/VirtualTable.tsx
 var import_eds_core_react19 = require("@equinor/eds-core-react");
 var import_react_virtual = require("@tanstack/react-virtual");
+var import_react6 = require("react");
+var import_styled_components15 = __toESM(require("styled-components"));
 
 // src/DataTable/components/PaddingRow.tsx
 var import_eds_core_react18 = require("@equinor/eds-core-react");
@@ -3313,7 +3338,7 @@ function VirtualTable(_a) {
     "cellConfig",
     "containerRef"
   ]);
-  var _a2, _b2;
+  var _a2;
   const { rows } = table.getRowModel();
   const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
     count: rows.length,
@@ -3324,13 +3349,13 @@ function VirtualTable(_a) {
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { children: [
+  const paddingBottom = true ? 0 : virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_eds_core_react19.Table, { style: { position: "relative" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Caption, { hidden: true, children: props.tableCaption }),
     /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableHeader, { sticky: props.stickyHeader, table }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
+    props.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Body, { children: new Array(...new Array(30)).map((_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Row, { children: table.getVisibleLeafColumns().map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.Table.Cell, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TableCellSkeleton, { delay: (rowIndex + 1) / 20 + (columnIndex + 1) / 5 }) }, rowIndex + column.id)) }, rowIndex)) }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TableBody, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingTop }),
-      rows.length ? virtualRows.map((virtualRow) => {
+      rows.length && virtualRows.map((virtualRow) => {
         const row = rows[virtualRow.index];
         return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
           TableRow,
@@ -3343,16 +3368,34 @@ function VirtualTable(_a) {
           },
           row.id
         );
-      }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { isLoading: props.isLoading }),
+      }),
+      !rows.length && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PlaceholderRow, { children: props.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_eds_core_react19.DotProgress, { color: "primary" }) : "No data available" }),
+      props.isFetchingNextPage && false,
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(PaddingRow, { height: paddingBottom })
     ] })
   ] });
 }
+var TableCellSkeleton = import_styled_components15.default.div`
+  opacity: 0.5;
+  animation: 1s skeleton-loading ${({ delay }) => `${delay}s`} linear infinite alternate;
+  height: 1rem;
+  border-radius: 0.5rem;
+  background-color: #ccc;
+
+  @keyframes skeleton-loading {
+    0% {
+      background-color: #ccc;
+    }
+    100% {
+      background-color: #eee;
+    }
+  }
+`;
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
-  const fetchMoreOnBottomReached = (0, import_react5.useCallback)(
+  const fetchMoreOnBottomReached = (0, import_react7.useCallback)(
     (tableContainer) => {
       if (!infiniteScrollConfig)
         return;
@@ -3366,11 +3409,11 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
     },
     [infiniteScrollConfig]
   );
-  const onTableContainerScroll = (0, import_react5.useCallback)(
+  const onTableContainerScroll = (0, import_react7.useCallback)(
     (event) => fetchMoreOnBottomReached(event.target),
     [fetchMoreOnBottomReached]
   );
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!infiniteScrollConfig)
       return;
     fetchMoreOnBottomReached(tableContainerRef.current);
@@ -3379,10 +3422,10 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
 }
 
 // src/DataTable/hooks/useForceRerender.ts
-var import_react6 = require("react");
+var import_react8 = require("react");
 function useForceRerender() {
-  const [, setTick] = (0, import_react6.useState)(0);
-  return (0, import_react6.useCallback)(() => setTick((tick) => tick + 1), []);
+  const [, setTick] = (0, import_react8.useState)(0);
+  return (0, import_react8.useCallback)(() => setTick((tick) => tick + 1), []);
 }
 
 // src/DataTable/DataTable.tsx
@@ -3411,6 +3454,7 @@ var DataTableWrapper = import_styled_components16.default.div`
 }};
     width: '100%';
     overflow: auto;
+    ${(props) => props.disableYScroll ? "overflow-y: hidden;" : ""}
     ${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
 
     table {
@@ -3426,14 +3470,14 @@ var DataTableWrapper = import_styled_components16.default.div`
   }
 `;
 function DataTable(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react7.useState)({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = (0, import_react9.useState)({});
   const [columnVisibility, setColumnVisibility] = [
     (_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
     (_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react7.useState)("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = (0, import_react9.useState)("");
   const [globalFilterState, setGlobalFilterState] = [
     (_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
     (_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
@@ -3442,22 +3486,22 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = (0, import_react7.useState)([]);
+  const [internalSortingState, setInternalSortingState] = (0, import_react9.useState)([]);
   const [sortingState, setSortingState] = [
     (_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
     (_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react7.useState)({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = (0, import_react9.useState)({});
   const [rowSelectionState, setRowSelectionState] = [
     (_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
     (_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = (0, import_react7.useState)({});
+  const [internalExpandedState, setInternalExpandedState] = (0, import_react9.useState)({});
   const [expandedState, setExpandedState] = [
     (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
     (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
-  const [internalColumnPinning, setInternalColumnPinning] = (0, import_react7.useState)({});
+  const [internalColumnPinning, setInternalColumnPinning] = (0, import_react9.useState)({});
   const [columnPinning, setColumnPinning] = [
     typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
     typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
@@ -3502,72 +3546,83 @@ function DataTable(props) {
     getSubRows: props == null ? void 0 : props.getSubRows,
     getRowId: props == null ? void 0 : props.getRowId
   });
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     var _a2;
     if ((_a2 = props.expansion) == null ? void 0 : _a2.expandAllByDefault) {
       table.toggleAllRowsExpanded();
     }
   }, [table, (_B = props.expansion) == null ? void 0 : _B.expandAllByDefault]);
   const { isLoading, rowConfig } = props;
-  const tableContainerRef = (0, import_react7.useRef)(null);
+  const tableContainerRef = (0, import_react9.useRef)(null);
   const onTableContainerScroll = useFetchMoreOnBottomReached(
     tableContainerRef,
     props.infiniteScroll
   );
   const forceRerender = useForceRerender();
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (Boolean(tableContainerRef.current))
       forceRerender();
   }, [tableContainerRef.current === null]);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
-    props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      TableBanner,
-      {
-        table,
-        bannerConfig: props.bannerConfig,
-        globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
-        tableCaption: props.tableCaption
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-      "div",
-      __spreadProps(__spreadValues({}, props.tableContainerProps), {
-        className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
-        onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
-        ref: (node) => {
-          var _a2;
-          if (node) {
-            tableContainerRef.current = node;
-            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
-              props.tableContainerProps.ref.current = node;
-            }
-          }
-        },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          VirtualTable,
-          {
-            containerRef: tableContainerRef,
-            tableCaption: props.tableCaption,
-            table,
-            rowConfig,
-            cellConfig,
-            isLoading,
-            stickyHeader: props.stickyHeader
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-          BasicTable,
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    DataTableWrapper,
+    {
+      height: props == null ? void 0 : props.height,
+      width: props == null ? void 0 : props.width,
+      tableLayout: props == null ? void 0 : props.tableLayout,
+      disableYScroll: props.isLoading,
+      children: [
+        props.bannerConfig && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          TableBanner,
           {
-            tableCaption: props.tableCaption,
             table,
-            rowConfig,
-            cellConfig,
-            isLoading,
-            stickyHeader: props.stickyHeader
+            bannerConfig: props.bannerConfig,
+            globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
+            tableCaption: props.tableCaption
           }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "div",
+          __spreadProps(__spreadValues({}, props.tableContainerProps), {
+            className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
+            onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
+            ref: (node) => {
+              var _a2;
+              if (node) {
+                tableContainerRef.current = node;
+                if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+                  props.tableContainerProps.ref.current = node;
+                }
+              }
+            },
+            children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              VirtualTable,
+              {
+                containerRef: tableContainerRef,
+                tableCaption: props.tableCaption,
+                table,
+                rowConfig,
+                cellConfig,
+                isLoading,
+                stickyHeader: props.stickyHeader,
+                isFetchingNextPage: (_G = props.infiniteScroll) == null ? void 0 : _G.isFetchingNextPage
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              BasicTable,
+              {
+                tableCaption: props.tableCaption,
+                table,
+                rowConfig,
+                cellConfig,
+                isLoading,
+                stickyHeader: props.stickyHeader,
+                isFetchingNextPage: (_H = props.infiniteScroll) == null ? void 0 : _H.isFetchingNextPage
+              }
+            )
+          })
         )
-      })
-    )
-  ] });
+      ]
+    }
+  );
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
@@ -3659,7 +3714,7 @@ function EditableCheckboxCell(_a) {
 
 // src/form-cells/EditableDateCell.tsx
 var import_eds_core_react22 = require("@equinor/eds-core-react");
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_react_hook_form3 = require("react-hook-form");
 var import_styled_components17 = __toESM(require("styled-components"));
 
@@ -3714,7 +3769,7 @@ function EditableDateCell(_a) {
   ]);
   const rawValue = context.getValue();
   const editMode = useEditMode();
-  const formattedValue = (0, import_react8.useMemo)(
+  const formattedValue = (0, import_react10.useMemo)(
     () => {
       var _a2;
       return (_a2 = dateStringFormatter == null ? void 0 : dateStringFormatter(rawValue)) != null ? _a2 : rawValue;
@@ -3934,7 +3989,7 @@ var InlineTextField2 = (0, import_styled_components18.default)(import_eds_core_r
 // src/form-cells/EditableTextAreaCell.tsx
 var import_eds_core_react26 = require("@equinor/eds-core-react");
 var import_eds_icons9 = require("@equinor/eds-icons");
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_react_hook_form6 = require("react-hook-form");
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -3948,8 +4003,8 @@ function EditableTextAreaCell(_a) {
     "error",
     "onChange"
   ]);
-  const [textareaValue, setTextareaValue] = (0, import_react9.useState)(context.getValue());
-  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [textareaValue, setTextareaValue] = (0, import_react11.useState)(context.getValue());
+  const [open, setOpen] = (0, import_react11.useState)(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)

package/dist/index.mjs

@@ -3031,28 +3031,51 @@ import {
   getSortedRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { useEffect as useEffect3, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState8 } from "react";
 import styled16 from "styled-components";
 
 // src/DataTable/components/BasicTable.tsx
 import { Table as EdsTable3 } from "@equinor/eds-core-react";
 
 // src/DataTable/components/PlaceholderRow.tsx
-import { DotProgress, Table as Table4, Typography as Typography2 } from "@equinor/eds-core-react";
-import styled11 from "styled-components";
+import { Table as Table4 } from "@equinor/eds-core-react";
+import { useState as useState4 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-var PlaceholderTextWrapper = styled11.div`
-  display: flex;
-  justify-content: center;
-`;
-function PlaceholderRow({ isLoading }) {
-  return /* @__PURE__ */ jsx13(Table4.Row, { children: /* @__PURE__ */ jsx13(Table4.Cell, { colSpan: 100, children: /* @__PURE__ */ jsx13(PlaceholderTextWrapper, { children: isLoading ? /* @__PURE__ */ jsx13(DotProgress, { color: "primary" }) : /* @__PURE__ */ jsx13(Typography2, { children: "No data available" }) }) }) });
+function PlaceholderRow({ children }) {
+  const [width, setWidth] = useState4();
+  return /* @__PURE__ */ jsx13(
+    Table4.Row,
+    {
+      ref: (node) => {
+        var _a, _b, _c;
+        if (!node)
+          return;
+        setWidth((_c = (_b = (_a = node.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement) == null ? void 0 : _c.clientWidth);
+      },
+      style: { pointerEvents: "none" },
+      children: /* @__PURE__ */ jsx13(Table4.Cell, { colSpan: 100, style: { padding: 0 }, children: width && /* @__PURE__ */ jsx13(
+        "div",
+        {
+          style: {
+            width,
+            display: "flex",
+            justifyContent: "center",
+            position: "sticky",
+            left: 0,
+            height: "100%",
+            alignItems: "center"
+          },
+          children
+        }
+      ) })
+    }
+  );
 }
 
 // src/DataTable/components/TableBody.tsx
 import { Table as Table5 } from "@equinor/eds-core-react";
-import styled12 from "styled-components";
-var TableBody = styled12(Table5.Body)`
+import styled11 from "styled-components";
+var TableBody = styled11(Table5.Body)`
   // The following attribute are important for fixed column width
   // CHANGE THES WITH CAUTION
   background: inherit;
@@ -3060,7 +3083,7 @@ var TableBody = styled12(Table5.Body)`
 
 // src/DataTable/components/TableRow.tsx
 import { Table as Table6 } from "@equinor/eds-core-react";
-import styled13 from "styled-components";
+import styled12 from "styled-components";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function TableRow({
   row,
@@ -3103,7 +3126,7 @@ function TableRow({
   );
   return rowWrapper ? rowWrapper({ row, children: tableRowContent }) : tableRowContent;
 }
-var StyledTableRow = styled13(Table6.Row)`
+var StyledTableRow = styled12(Table6.Row)`
   /* Background color must be inherited here. Does not work with inline styling */
   ${({ active }) => active ? "" : "background-color: inherit;"}
 `;
@@ -3134,20 +3157,20 @@ function BasicTable({
 }
 
 // src/DataTable/components/DataTableHeader.tsx
-import { Typography as Typography3 } from "@equinor/eds-core-react";
+import { Typography as Typography2 } from "@equinor/eds-core-react";
 import { search } from "@equinor/eds-icons";
-import styled15 from "styled-components";
+import styled14 from "styled-components";
 
 // src/DataTable/filters/DebouncedInput.tsx
 import { Button as Button4, Icon as Icon6, Input, Tooltip as Tooltip2 } from "@equinor/eds-core-react";
 import { close as close2 } from "@equinor/eds-icons";
-import { useEffect, useState as useState4 } from "react";
-import styled14 from "styled-components";
+import { useEffect, useState as useState5 } from "react";
+import styled13 from "styled-components";
 import { jsx as jsx16 } from "react/jsx-runtime";
-var Wrapper3 = styled14.div`
+var Wrapper3 = styled13.div`
   width: 200px;
 `;
-var CloseButton = styled14(Button4)`
+var CloseButton = styled13(Button4)`
   width: 24px;
   height: 24px;
 `;
@@ -3163,7 +3186,7 @@ function DebouncedInput(_a) {
     "icon",
     "debounce"
   ]);
-  const [value, setValue] = useState4(initialValue);
+  const [value, setValue] = useState5(initialValue);
   useEffect(() => {
     setValue(initialValue);
   }, [initialValue]);
@@ -3196,14 +3219,14 @@ var fuzzyFilter = (row, columnId, value, addMeta) => {
 
 // src/DataTable/components/DataTableHeader.tsx
 import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var TableBannerWrapper = styled15.div`
+var TableBannerWrapper = styled14.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 0.5rem;
   padding: ${(props) => props.padding || "1rem"};
 `;
-var FilterContainer = styled15.div`
+var FilterContainer = styled14.div`
   display: flex;
   align-items: center;
   gap: 1rem;
@@ -3218,7 +3241,7 @@ function TableBanner({
   var _a, _b, _c, _d, _e;
   return /* @__PURE__ */ jsxs9(TableBannerWrapper, { className: "--table-caption", padding: bannerConfig == null ? void 0 : bannerConfig.padding, children: [
     /* @__PURE__ */ jsxs9(FilterContainer, { className: "--filter-container-left", children: [
-      (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography3, { variant: "h3", as: "h2", children: tableCaption }),
+      (bannerConfig == null ? void 0 : bannerConfig.enableTableCaption) && /* @__PURE__ */ jsx17(Typography2, { variant: "h3", as: "h2", children: tableCaption }),
       (_c = (_a = bannerConfig == null ? void 0 : bannerConfig.customActionsLeft) == null ? void 0 : _a.call(bannerConfig, table)) != null ? _c : (_b = bannerConfig == null ? void 0 : bannerConfig.customActions) == null ? void 0 : _b.call(bannerConfig, table)
     ] }),
     /* @__PURE__ */ jsx17(FilterContainer, { className: "--filter-container-right", children: /* @__PURE__ */ jsxs9(Fragment3, { children: [
@@ -3245,8 +3268,10 @@ function TableBanner({
 }
 
 // src/DataTable/components/VirtualTable.tsx
-import { Table as Table8 } from "@equinor/eds-core-react";
+import { DotProgress, Table as Table8 } from "@equinor/eds-core-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { useState as useState6 } from "react";
+import styled15 from "styled-components";
 
 // src/DataTable/components/PaddingRow.tsx
 import { Table as Table7 } from "@equinor/eds-core-react";
@@ -3271,7 +3296,7 @@ function VirtualTable(_a) {
     "cellConfig",
     "containerRef"
   ]);
-  var _a2, _b2;
+  var _a2;
   const { rows } = table.getRowModel();
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
@@ -3282,13 +3307,13 @@ function VirtualTable(_a) {
   });
   const virtualRows = rowVirtualizer.getVirtualItems();
   const paddingTop = virtualRows.length > 0 ? ((_a2 = virtualRows == null ? void 0 : virtualRows[0]) == null ? void 0 : _a2.start) || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
-  return /* @__PURE__ */ jsxs10(Table8, { children: [
+  const paddingBottom = true ? 0 : virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - (((_b2 = virtualRows == null ? void 0 : virtualRows[virtualRows.length - 1]) == null ? void 0 : _b2.end) || 0) : 0;
+  return /* @__PURE__ */ jsxs10(Table8, { style: { position: "relative" }, children: [
     /* @__PURE__ */ jsx19(Table8.Caption, { hidden: true, children: props.tableCaption }),
     /* @__PURE__ */ jsx19(TableHeader, { sticky: props.stickyHeader, table }),
-    /* @__PURE__ */ jsxs10(TableBody, { children: [
+    props.isLoading ? /* @__PURE__ */ jsx19(Table8.Body, { children: new Array(...new Array(30)).map((_, rowIndex) => /* @__PURE__ */ jsx19(Table8.Row, { children: table.getVisibleLeafColumns().map((column, columnIndex) => /* @__PURE__ */ jsx19(Table8.Cell, { children: /* @__PURE__ */ jsx19(TableCellSkeleton, { delay: (rowIndex + 1) / 20 + (columnIndex + 1) / 5 }) }, rowIndex + column.id)) }, rowIndex)) }) : /* @__PURE__ */ jsxs10(TableBody, { children: [
       /* @__PURE__ */ jsx19(PaddingRow, { height: paddingTop }),
-      rows.length ? virtualRows.map((virtualRow) => {
+      rows.length && virtualRows.map((virtualRow) => {
         const row = rows[virtualRow.index];
         return /* @__PURE__ */ jsx19(
           TableRow,
@@ -3301,11 +3326,29 @@ function VirtualTable(_a) {
           },
           row.id
         );
-      }) : /* @__PURE__ */ jsx19(PlaceholderRow, { isLoading: props.isLoading }),
+      }),
+      !rows.length && /* @__PURE__ */ jsx19(PlaceholderRow, { children: props.isLoading ? /* @__PURE__ */ jsx19(DotProgress, { color: "primary" }) : "No data available" }),
+      props.isFetchingNextPage && false,
       /* @__PURE__ */ jsx19(PaddingRow, { height: paddingBottom })
     ] })
   ] });
 }
+var TableCellSkeleton = styled15.div`
+  opacity: 0.5;
+  animation: 1s skeleton-loading ${({ delay }) => `${delay}s`} linear infinite alternate;
+  height: 1rem;
+  border-radius: 0.5rem;
+  background-color: #ccc;
+
+  @keyframes skeleton-loading {
+    0% {
+      background-color: #ccc;
+    }
+    100% {
+      background-color: #eee;
+    }
+  }
+`;
 
 // src/DataTable/hooks/useFetchMoreOnBottomReached.tsx
 import { useCallback, useEffect as useEffect2 } from "react";
@@ -3337,9 +3380,9 @@ function useFetchMoreOnBottomReached(tableContainerRef, infiniteScrollConfig) {
 }
 
 // src/DataTable/hooks/useForceRerender.ts
-import { useCallback as useCallback2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useState as useState7 } from "react";
 function useForceRerender() {
-  const [, setTick] = useState5(0);
+  const [, setTick] = useState7(0);
   return useCallback2(() => setTick((tick) => tick + 1), []);
 }
 
@@ -3369,6 +3412,7 @@ var DataTableWrapper = styled16.div`
 }};
     width: '100%';
     overflow: auto;
+    ${(props) => props.disableYScroll ? "overflow-y: hidden;" : ""}
     ${(props) => canUseContainStrict(props.height) ? "contain: strict;" : ""}
 
     table {
@@ -3384,14 +3428,14 @@ var DataTableWrapper = styled16.div`
   }
 `;
 function DataTable(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H;
   const { columns, data, bannerConfig, cellConfig, sorting } = props;
-  const [internalColumnVisibility, setInternalColumnVisibility] = useState6({});
+  const [internalColumnVisibility, setInternalColumnVisibility] = useState8({});
   const [columnVisibility, setColumnVisibility] = [
     (_b = (_a = props.columnVisibility) == null ? void 0 : _a.state) != null ? _b : internalColumnVisibility,
     (_d = (_c = props.columnVisibility) == null ? void 0 : _c.onChange) != null ? _d : setInternalColumnVisibility
   ];
-  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState6("");
+  const [internalGlobalFilterState, setInternalGlobalFilterState] = useState8("");
   const [globalFilterState, setGlobalFilterState] = [
     (_f = (_e = props.globalFilter) == null ? void 0 : _e.state) != null ? _f : internalGlobalFilterState,
     (_h = (_g = props.globalFilter) == null ? void 0 : _g.onChange) != null ? _h : setInternalGlobalFilterState
@@ -3400,22 +3444,22 @@ function DataTable(props) {
   function enableGlobalFilter(value) {
     return enableOrUndefined(shouldEnableGlobalFilter, value);
   }
-  const [internalSortingState, setInternalSortingState] = useState6([]);
+  const [internalSortingState, setInternalSortingState] = useState8([]);
   const [sortingState, setSortingState] = [
     (_k = (_j = props.sorting) == null ? void 0 : _j.state) != null ? _k : internalSortingState,
     (_m = (_l = props.sorting) == null ? void 0 : _l.onChange) != null ? _m : setInternalSortingState
   ];
-  const [internalRowSelectionState, setInternalRowSelectionState] = useState6({});
+  const [internalRowSelectionState, setInternalRowSelectionState] = useState8({});
   const [rowSelectionState, setRowSelectionState] = [
     (_o = (_n = props.rowSelection) == null ? void 0 : _n.state) != null ? _o : internalRowSelectionState,
     (_q = (_p = props.rowSelection) == null ? void 0 : _p.onChange) != null ? _q : setInternalRowSelectionState
   ];
-  const [internalExpandedState, setInternalExpandedState] = useState6({});
+  const [internalExpandedState, setInternalExpandedState] = useState8({});
   const [expandedState, setExpandedState] = [
     (_s = (_r = props.expansion) == null ? void 0 : _r.state) != null ? _s : internalExpandedState,
     (_u = (_t = props.expansion) == null ? void 0 : _t.onChange) != null ? _u : setInternalExpandedState
   ];
-  const [internalColumnPinning, setInternalColumnPinning] = useState6({});
+  const [internalColumnPinning, setInternalColumnPinning] = useState8({});
   const [columnPinning, setColumnPinning] = [
     typeof props.columnPinning === "object" && props.columnPinning.state ? props.columnPinning.state : internalColumnPinning,
     typeof props.columnPinning === "object" && props.columnPinning.onChange ? props.columnPinning.onChange : setInternalColumnPinning
@@ -3477,55 +3521,66 @@ function DataTable(props) {
     if (Boolean(tableContainerRef.current))
       forceRerender();
   }, [tableContainerRef.current === null]);
-  return /* @__PURE__ */ jsxs11(DataTableWrapper, { height: props == null ? void 0 : props.height, width: props == null ? void 0 : props.width, tableLayout: props == null ? void 0 : props.tableLayout, children: [
-    props.bannerConfig && /* @__PURE__ */ jsx20(
-      TableBanner,
-      {
-        table,
-        bannerConfig: props.bannerConfig,
-        globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
-        tableCaption: props.tableCaption
-      }
-    ),
-    /* @__PURE__ */ jsx20(
-      "div",
-      __spreadProps(__spreadValues({}, props.tableContainerProps), {
-        className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
-        onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
-        ref: (node) => {
-          var _a2;
-          if (node) {
-            tableContainerRef.current = node;
-            if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
-              props.tableContainerProps.ref.current = node;
-            }
-          }
-        },
-        children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
-          VirtualTable,
-          {
-            containerRef: tableContainerRef,
-            tableCaption: props.tableCaption,
-            table,
-            rowConfig,
-            cellConfig,
-            isLoading,
-            stickyHeader: props.stickyHeader
-          }
-        ) : /* @__PURE__ */ jsx20(
-          BasicTable,
+  return /* @__PURE__ */ jsxs11(
+    DataTableWrapper,
+    {
+      height: props == null ? void 0 : props.height,
+      width: props == null ? void 0 : props.width,
+      tableLayout: props == null ? void 0 : props.tableLayout,
+      disableYScroll: props.isLoading,
+      children: [
+        props.bannerConfig && /* @__PURE__ */ jsx20(
+          TableBanner,
           {
-            tableCaption: props.tableCaption,
             table,
-            rowConfig,
-            cellConfig,
-            isLoading,
-            stickyHeader: props.stickyHeader
+            bannerConfig: props.bannerConfig,
+            globalFilter: { state: globalFilterState, onChange: setGlobalFilterState },
+            tableCaption: props.tableCaption
           }
+        ),
+        /* @__PURE__ */ jsx20(
+          "div",
+          __spreadProps(__spreadValues({}, props.tableContainerProps), {
+            className: "--table-container " + ((_D = (_C = props.tableContainerProps) == null ? void 0 : _C.className) != null ? _D : ""),
+            onScroll: (_F = (_E = props.tableContainerProps) == null ? void 0 : _E.onScroll) != null ? _F : onTableContainerScroll,
+            ref: (node) => {
+              var _a2;
+              if (node) {
+                tableContainerRef.current = node;
+                if ((_a2 = props.tableContainerProps) == null ? void 0 : _a2.ref) {
+                  props.tableContainerProps.ref.current = node;
+                }
+              }
+            },
+            children: (props == null ? void 0 : props.virtual) ? /* @__PURE__ */ jsx20(
+              VirtualTable,
+              {
+                containerRef: tableContainerRef,
+                tableCaption: props.tableCaption,
+                table,
+                rowConfig,
+                cellConfig,
+                isLoading,
+                stickyHeader: props.stickyHeader,
+                isFetchingNextPage: (_G = props.infiniteScroll) == null ? void 0 : _G.isFetchingNextPage
+              }
+            ) : /* @__PURE__ */ jsx20(
+              BasicTable,
+              {
+                tableCaption: props.tableCaption,
+                table,
+                rowConfig,
+                cellConfig,
+                isLoading,
+                stickyHeader: props.stickyHeader,
+                isFetchingNextPage: (_H = props.infiniteScroll) == null ? void 0 : _H.isFetchingNextPage
+              }
+            )
+          })
         )
-      })
-    )
-  ] });
+      ]
+    }
+  );
 }
 
 // src/form-cells/EditableCheckboxCell.tsx
@@ -3739,7 +3794,7 @@ import { Autocomplete } from "@equinor/eds-core-react";
 import { Controller as Controller3 } from "react-hook-form";
 
 // src/form-cells/FormHelperText.tsx
-import { Typography as Typography4 } from "@equinor/eds-core-react";
+import { Typography as Typography3 } from "@equinor/eds-core-react";
 import { tokens as tokens7 } from "@equinor/eds-tokens";
 import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var colors = {
@@ -3760,7 +3815,7 @@ function HelperText({ helperText, variant, helperIcon }) {
       children: [
         /* @__PURE__ */ jsx24("span", { style: { flexShrink: 0 }, children: helperIcon }),
         /* @__PURE__ */ jsx24(
-          Typography4,
+          Typography3,
           {
             style: {
               fontSize: "0.75rem",
@@ -3892,7 +3947,7 @@ var InlineTextField2 = styled18(TextField2)`
 // src/form-cells/EditableTextAreaCell.tsx
 import { Button as Button5, Dialog as EDS, Icon as Icon8, TextField as TextField3 } from "@equinor/eds-core-react";
 import { arrow_up } from "@equinor/eds-icons";
-import { useState as useState7 } from "react";
+import { useState as useState9 } from "react";
 import { Controller as Controller5 } from "react-hook-form";
 import styled19 from "styled-components";
 import { Fragment as Fragment7, jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
@@ -3906,8 +3961,8 @@ function EditableTextAreaCell(_a) {
     "error",
     "onChange"
   ]);
-  const [textareaValue, setTextareaValue] = useState7(context.getValue());
-  const [open, setOpen] = useState7(false);
+  const [textareaValue, setTextareaValue] = useState9(context.getValue());
+  const [open, setOpen] = useState9(false);
   const editMode = useEditMode();
   const name = context.column.id;
   if (!editMode)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/apollo-components",
-  "version": "3.4.0-beta.1",
+  "version": "3.4.0-skeleton.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",