vueless 1.4.12-beta.1 → 1.4.12-beta.10

package/composables/useUI.ts

@@ -228,6 +228,16 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
     const keysAttrs: KeysAttrs<T> = {};
     const attrsRefs: Record<string, Ref<KeyAttrs>> = {};
 
+    /**
+     * Structural signature per key. The watcher below fires on any config/prop/class
+     * change and would otherwise re-mint every key's attrs object — even keys whose
+     * classes are identical — invalidating downstream reactive readers (e.g. every
+     * body row of a table on an unrelated sticky toggle). We skip the `.value` write
+     * when the new object is structurally equal to the last one, so the ref keeps its
+     * identity and dependents are not re-rendered.
+     */
+    const attrsSignatures: Record<string, string> = {};
+
     for (const key in config.value) {
       if (isSystemKey(key)) continue;
 
@@ -266,12 +276,20 @@ export function useUI<T>(defaultConfig: T, mutatedProps?: MutatedProps, topLevel
           /* Delete value key to prevent v-model overwrite. */
           delete commonAttrs.value;
 
-          attrsRefs[key].value = {
+          const nextValue: KeyAttrs = {
             ...commonAttrs,
             class: cx([...data.extendsClasses, classes, commonAttrs.class]),
             config: data.mergedNestedConfig,
             ...data.mergedDefaults,
           };
+
+          /* Keep the previous ref identity when nothing changed — see attrsSignatures. */
+          const signature = JSON.stringify(nextValue);
+
+          if (attrsSignatures[key] === signature) continue;
+
+          attrsSignatures[key] = signature;
+          attrsRefs[key].value = nextValue;
         }
       },
       { immediate: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.4.12-beta.1",
+  "version": "1.4.12-beta.10",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -59,7 +59,7 @@
     "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.8",
     "@vue/tsconfig": "^0.9.1",
-    "@vueless/storybook": "^1.7.0",
+    "@vueless/storybook": "^1.7.9",
     "eslint": "^10.2.1",
     "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-tailwindcss": "^4.0.0-alpha.7",

package/ui.container-drawer/tests/UDrawer.test.ts

@@ -9,11 +9,6 @@ import type { Props } from "../types";
 describe("UDrawer", () => {
   const modelValue = true;
 
-  // Wait for an async component to load
-  function sleep(ms: number = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   // Props tests
   describe("Props", () => {
     it("ModelValue – renders when true", () => {
@@ -150,10 +145,10 @@ describe("UDrawer", () => {
       expect(innerWrapper.attributes("class")).toContain(expectedClass);
     });
 
-    it("CloseOnOverlay – closes drawer when overlay is clicked", () => {
+    it("CloseOnOverlay – closes drawer when overlay is clicked", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -167,18 +162,17 @@ describe("UDrawer", () => {
 
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
-        await sleep(1000);
 
-        const drawer = component.find('[vl-key="drawer"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(drawer.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
-    it("CloseOnEsc – closes drawer when escape key is pressed", () => {
+    it("CloseOnEsc – closes drawer when escape key is pressed", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UDrawer, {
           props: {
             modelValue,
@@ -189,12 +183,11 @@ describe("UDrawer", () => {
         const wrapper = component.find("[vl-key='wrapper']");
 
         await wrapper.trigger("keydown", { key: "Escape" });
-        await sleep(1000);
 
-        const drawer = component.find('[vl-key="drawer"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(drawer.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     it("DataTest – applies the correct data-test attribute", () => {

package/ui.container-modal/tests/UModal.test.ts

@@ -34,11 +34,6 @@ const mountWithRouter = (component: unknown, options: UnknownObject) => {
 describe("UModal", () => {
   const modelValue = true;
 
-  // Wait for an async component to load
-  function sleep(ms: number = 0) {
-    return new Promise((resolve) => setTimeout(resolve, ms));
-  }
-
   // Props tests
   describe("Props", () => {
     // ModelValue prop
@@ -189,10 +184,10 @@ describe("UModal", () => {
     });
 
     // CloseOnOverlay prop
-    it("renders with closeOnOverlay prop", () => {
+    it("renders with closeOnOverlay prop", async () => {
       const closeOnOverlay = [true, false];
 
-      closeOnOverlay.forEach(async (value) => {
+      for (const value of closeOnOverlay) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -206,19 +201,18 @@ describe("UModal", () => {
 
         await innerWrapper.trigger("mousedown");
         await innerWrapper.trigger("click");
-        await sleep(1000);
 
-        const modal = component.find('[vl-key="modal"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(modal.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     // CloseOnEsc prop
-    it("renders with closeOnEsc prop", () => {
+    it("renders with closeOnEsc prop", async () => {
       const closeOnEsc = [true, false];
 
-      closeOnEsc.forEach(async (value) => {
+      for (const value of closeOnEsc) {
         const component = mount(UModal, {
           props: {
             modelValue,
@@ -229,12 +223,11 @@ describe("UModal", () => {
         const wrapper = component.find("[vl-key='wrapper']");
 
         await wrapper.trigger("keydown", { key: "Escape" });
-        await sleep(1000);
 
-        const modal = component.find('[vl-key="modal"]');
+        const closeRequests = component.emitted("update:modelValue");
 
-        expect(modal.exists()).toBe(!value);
-      });
+        expect(value ? closeRequests?.at(-1) : closeRequests).toEqual(value ? [false] : undefined);
+      }
     });
 
     // Inner prop

package/ui.data-list/UDataList.vue

@@ -129,6 +129,9 @@ const {
       :animation="animationDuration"
       :ghost-class="config.draggableGhost"
       :drag-class="config.draggableDrag"
+      :force-fallback="forceFallback"
+      :fallback-on-body="fallbackOnBody"
+      :fallback-class="fallbackClass"
       v-bind="draggableAttrs"
       :data-test="getDataTest()"
       @end="onDragEnd"

package/ui.data-list/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "",
   draggable: "",
   draggableDrag: "bg-lifted",
-  draggableGhost: "bg-lifted/50",
+  draggableGhost: "data-list-ghost",
   itemWrapper: "group/item-wrapper",
   item: {
     base: `
@@ -55,6 +55,9 @@ export default /*tw*/ {
     labelKey: "label",
     valueKey: "value",
     animationDuration: 200,
+    forceFallback: false,
+    fallbackOnBody: false,
+    fallbackClass: "shadow-sm",
     /* icons */
     dragIcon: "drag_indicator",
   },

package/ui.data-list/storybook/stories.ts

@@ -118,6 +118,22 @@ Nesting.args = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };
 
+export const ForceFallback = DefaultTemplate.bind({});
+ForceFallback.args = {
+  forceFallback: true,
+  fallbackOnBody: true,
+  fallbackClass: "opacity-100!",
+};
+ForceFallback.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "Use `forceFallback` to drag with Sortable's JS fallback instead of native HTML5 DnD (browsers force translucency on native drag images). Pair with `fallbackOnBody` when the list sits inside an `overflow: hidden` container, and `fallbackClass` to style the floating clone.",
+    },
+  },
+};
+
 export const LabelSlot = DefaultTemplate.bind({});
 LabelSlot.args = {
   slotTemplate: `

package/ui.data-list/tests/UDataList.test.ts

@@ -162,6 +162,83 @@ describe("UDataList.vue", () => {
       expect(draggableComponent.vm.$attrs.animation).toBe(animationDuration);
     });
 
+    it("Force Fallback – passes forceFallback to draggable", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          forceFallback: true,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["force-fallback"]).toBe(true);
+    });
+
+    it("Force Fallback – defaults to false", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["force-fallback"]).toBe(false);
+    });
+
+    it("Fallback On Body – passes fallbackOnBody to draggable", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          fallbackOnBody: true,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-on-body"]).toBe(true);
+    });
+
+    it("Fallback On Body – defaults to false", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-on-body"]).toBe(false);
+    });
+
+    it("Fallback Class – passes fallbackClass to draggable", () => {
+      const fallbackClass = "custom-drag-fallback";
+
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+          fallbackClass,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe(fallbackClass);
+    });
+
+    it("Fallback Class – defaults to shadow-sm", () => {
+      const component = mount(UDataList, {
+        props: {
+          list: defaultList,
+        },
+      });
+
+      const draggableComponent = component.findComponent(draggable);
+
+      expect(draggableComponent.vm.$attrs["fallback-class"]).toBe("shadow-sm");
+    });
+
     it("Nesting – renders nested items when children array is present", async () => {
       const component = mount(UDataList, {
         props: {

package/ui.data-list/types.ts

@@ -49,6 +49,21 @@ export interface Props {
    */
   animationDuration?: number;
 
+  /**
+   * Sortable JS fallback (instead of native HTML5 DnD).
+   */
+  forceFallback?: boolean;
+
+  /**
+   * Append the fallback drag clone to document.body.
+   */
+  fallbackOnBody?: boolean;
+
+  /**
+   * CSS class for the Sortable fallback drag clone (forceFallback mode).
+   */
+  fallbackClass?: string;
+
   /**
    * Disable empty state for nested elements if empty (internal props).
    * @ignore

package/ui.data-table/UTable.vue

@@ -31,6 +31,7 @@ import UEmpty from "../ui.container-empty/UEmpty.vue";
 import UCheckbox from "../ui.form-checkbox/UCheckbox.vue";
 import ULoaderProgress from "../ui.loader-progress/ULoaderProgress.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
+import USkeleton from "../ui.skeleton/USkeleton.vue";
 import UTableRow from "./UTableRow.vue";
 
 import type { ComputedRef, VNode } from "vue";
@@ -58,6 +59,7 @@ const props = withDefaults(defineProps<Props>(), {
   dateDivider: () => [],
   selectedRows: () => [],
   expandedRows: () => [],
+  skeletonWidths: () => defaultConfig.defaults.skeletonWidths,
 });
 
 const emit = defineEmits([
@@ -206,7 +208,9 @@ const isCheckedMoreOneTableItems = computed(() => {
   return Boolean(localSelectedRows.value.length);
 });
 
-const tableRowWidthStyle = computed(() => ({ width: `${tableWidth.value / PX_IN_REM}rem` }));
+const tableRowWidthStyle = computed(() => ({
+  width: `${tableWidth.value / PX_IN_REM}rem`,
+}));
 
 const flatTableRows = computed(() => getFlatRows(props.rows));
 
@@ -216,6 +220,18 @@ const visibleFlatRows = computed(() => {
   return flatTableRows.value.filter((row) => !row.parentRowId || expanded.has(row.parentRowId));
 });
 
+const showSkeletonLoading = computed(() => {
+  return props.skeletonLoading && !sortedRows.value.length;
+});
+
+const progressLoading = computed(() => {
+  return showSkeletonLoading.value ? false : props.loading;
+});
+
+const skeletonRowIndexes = computed(() => {
+  return Array.from({ length: props.skeletonRows }, (_, index) => index);
+});
+
 const virtualScroll = useVirtualScroll({
   containerRef: tableWrapperRef,
   totalCount: computed(() => (props.virtualScroll ? visibleFlatRows.value.length : 0)),
@@ -243,6 +259,10 @@ function isRowVisible(row: FlatRow): boolean {
   return !row.parentRowId || expandedRowsSet.value.has(row.parentRowId);
 }
 
+function getSkeletonWidthClass(columnIndex: number, rowIndex: number): string {
+  return props.skeletonWidths[(columnIndex + rowIndex) % props.skeletonWidths.length];
+}
+
 const searchMatches = computed<SearchMatch[]>(() => {
   const query = props.search?.toLowerCase();
 
@@ -663,7 +683,9 @@ function getDateDividerData(rowDate: string | Date | undefined) {
 function setFooterCellWidth(zero?: null) {
   const ZERO_WIDTH = 0;
 
-  if (!props.stickyFooter || !footerRowRef.value || !stickyFooterRowRef.value) return;
+  if (!props.stickyFooter || !footerRowRef.value || !stickyFooterRowRef.value) {
+    return;
+  }
 
   const mainFooterItems = [...footerRowRef.value.children] as HTMLElement[];
   const stickyFooterItems = [...stickyFooterRowRef.value.children] as HTMLElement[];
@@ -816,6 +838,50 @@ function onBodyDoubleClick(event: MouseEvent) {
   onDoubleClickRow(rowData);
 }
 
+// Detect double-tap on touch devices and dispatch a native `dblclick`,
+// which bubbles to the tbody and triggers onBodyDoubleClick.
+const DOUBLE_TAP_DELAY = 300;
+const DOUBLE_TAP_MAX_MOVE = 24;
+
+let lastTapTime = 0;
+let lastTapRow: Element | null = null;
+let lastTapX = 0;
+let lastTapY = 0;
+
+function onBodyTouchEnd(event: TouchEvent) {
+  if (event.changedTouches.length !== 1) return;
+
+  const [touch] = event.changedTouches;
+  const target = touch.target as HTMLElement | null;
+  const row = target?.closest("tr[data-row-id]") ?? null;
+
+  if (!row) {
+    lastTapRow = null;
+
+    return;
+  }
+
+  const now = event.timeStamp;
+  const isSameRow = row === lastTapRow;
+  const isQuick = now - lastTapTime < DOUBLE_TAP_DELAY;
+  const isNear =
+    Math.abs(touch.clientX - lastTapX) < DOUBLE_TAP_MAX_MOVE &&
+    Math.abs(touch.clientY - lastTapY) < DOUBLE_TAP_MAX_MOVE;
+
+  if (isSameRow && isQuick && isNear) {
+    lastTapTime = 0;
+    lastTapRow = null;
+    row.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true }));
+
+    return;
+  }
+
+  lastTapTime = now;
+  lastTapRow = row;
+  lastTapX = touch.clientX;
+  lastTapY = touch.clientY;
+}
+
 function onChangeSelectAll(selectAll: boolean) {
   if (selectAll && canSelectAll.value) {
     localSelectedRows.value = [...flatTableRows.value];
@@ -889,7 +955,7 @@ function getDateDividerConfig(row: Row, isSelected: boolean) {
     : bodyDateDividerAttrs.value.config;
 
   return getMergedConfig({
-    defaultConfig: defaultConfig,
+    defaultConfig,
     globalConfig: getDateDividerData(row.rowDate).config,
   }) as UDividerConfig;
 }
@@ -917,7 +983,9 @@ function getRowSearchMatchColumns(row: FlatRow): Set<string> | undefined {
 }
 
 function getRowActiveSearchMatchColumn(row: FlatRow): string | undefined {
-  if (!activeMatch.value || activeMatch.value.rowId !== row.id) return undefined;
+  if (!activeMatch.value || activeMatch.value.rowId !== row.id) {
+    return;
+  }
 
   return activeMatch.value.columnKey;
 }
@@ -1036,9 +1104,11 @@ const {
   bodyCellSearchMatchTextAttrs,
   bodyCellSearchMatchActiveAttrs,
   bodyCellSearchMatchTextActiveAttrs,
+  skeletonCellAttrs,
+  skeletonCheckboxAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
 
-/* Plain object — inner refs are already reactive. */
+/* Plain object — inner refs are already reactive and identity-stable (see useUI). */
 const tableRowAttrs = {
   bodyCellContentAttrs,
   bodyCellCheckboxAttrs,
@@ -1085,8 +1155,40 @@ function renderDateDividerRow(row: FlatRow, rowIndex: number): VNode | null {
   ]);
 }
 
+/**
+ * Per-row VNode memo cache. Toggling one checkbox invalidates the `selectedRowIds`
+ * computed, which re-runs the body render function. Without memoization every row's
+ * VNode would be rebuilt and diffed on each toggle (200+ rows → visible lag). We cache
+ * each row's VNode keyed by row id and only rebuild it when an input that actually
+ * affects that row changes — so an unrelated row keeps the same VNode reference and
+ * Vue skips it entirely during patch.
+ */
+const rowVNodeCache = new Map<RowId, { signature: string; row: FlatRow; vnode: VNode }>();
+
+function getRowSignature(row: FlatRow, rowIndex: number): string {
+  return [
+    rowIndex,
+    Number(isRowSelected(row)),
+    Number(expandedRowsSet.value.has(row.id)),
+    Number(isRowVisible(row)),
+    props.selectable ? 1 : 0,
+    props.search || "",
+    getRowActiveSearchMatchColumn(row) || "",
+    [...(getRowSearchMatchColumns(row) || [])].join(","),
+  ].join("|");
+}
+
 function renderTableRow(row: FlatRow, rowIndex: number): VNode {
-  return h(
+  const signature = getRowSignature(row, rowIndex);
+  const cached = rowVNodeCache.get(row.id);
+
+  // `row` identity guards against stale data: `flatTableRows` yields fresh row
+  // objects whenever `props.rows` changes, so a new reference means new cell data.
+  if (cached && cached.row === row && cached.signature === signature) {
+    return cached.vnode;
+  }
+
+  const vnode = h(
     UTableRow,
     {
       key: row.id,
@@ -1112,13 +1214,48 @@ function renderTableRow(row: FlatRow, rowIndex: number): VNode {
     } as unknown as UTableRowProps,
     slots,
   );
+
+  rowVNodeCache.set(row.id, { signature, row, vnode });
+
+  return vnode;
 }
 
+/* Column layout / config changes affect every row — invalidate the whole cache. */
+watch(
+  [
+    normalizedColumns,
+    config,
+    columnPositions,
+    () => props.textEllipsis,
+    () => props.emptyCellLabel,
+  ],
+  () => rowVNodeCache.clear(),
+);
+
+/* Drop cache entries for rows that no longer exist (filters, pagination reset). */
+watch(flatTableRows, (rows) => {
+  const liveIds = new Set(rows.map((row) => row.id));
+
+  for (const id of rowVNodeCache.keys()) {
+    if (!liveIds.has(id)) rowVNodeCache.delete(id);
+  }
+});
+
 function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
   return [renderDateDividerRow(row, rowIndex), renderTableRow(row, rowIndex)].filter(
     Boolean,
   ) as VNode[];
 }
+
+/**
+ * Stable functional component for the body rows. Defined once so its type
+ * identity never changes across parent re-renders — a previous inline `:is`
+ * arrow created a new type on every render, forcing Vue to unmount and rebuild
+ * the entire tbody (e.g. on a sticky-header toggle). Reading `renderedRows`
+ * through the closure keeps it reactive while row keys drive reconciliation.
+ */
+const BodyRows = () =>
+  renderedRows.value.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat();
 </script>
 
 <template>
@@ -1171,7 +1308,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
         </template>
       </div>
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div
@@ -1203,7 +1340,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
       -->
       <slot name="header-actions" :selected-rows="localSelectedRows" />
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div
@@ -1235,7 +1372,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
       -->
       <slot name="header-actions" :selected-rows="localSelectedRows" />
 
-      <ULoaderProgress :loading="loading" v-bind="stickyHeaderLoaderAttrs" />
+      <ULoaderProgress :loading="progressLoading" v-bind="stickyHeaderLoaderAttrs" />
     </div>
 
     <div ref="table-wrapper" v-bind="tableWrapperAttrs" @scroll="virtualScroll.onScroll">
@@ -1293,7 +1430,12 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
                 @binding {number} index
               -->
               <slot
-                v-if="hasSlotContent($slots[`header-${column.key}`], { column, index })"
+                v-if="
+                  hasSlotContent($slots[`header-${column.key}`], {
+                    column,
+                    index,
+                  })
+                "
                 :name="`header-${column.key}`"
                 :column="column"
                 :index="index"
@@ -1305,7 +1447,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             </th>
           </tr>
 
-          <ULoaderProgress :loading="loading" v-bind="headerLoaderAttrs" />
+          <ULoaderProgress :loading="progressLoading" v-bind="headerLoaderAttrs" />
         </thead>
 
         <tbody
@@ -1313,6 +1455,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
           v-bind="bodyAttrs"
           @click="onBodyClick"
           @dblclick="onBodyDoubleClick"
+          @touchend="onBodyTouchEnd"
         >
           <tr
             v-if="hasBeforeFirstRowSlot"
@@ -1331,9 +1474,7 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
             />
           </tr>
 
-          <component
-            :is="() => renderedRows.map((row, rowIndex) => renderRowTemplate(row, rowIndex)).flat()"
-          />
+          <component :is="BodyRows" />
 
           <tr v-if="props.virtualScroll && virtualScroll.bottomSpacerHeight.value > 0">
             <td
@@ -1356,6 +1497,30 @@ function renderRowTemplate(row: FlatRow, rowIndex: number): VNode[] {
           </tr>
         </tbody>
 
+        <tbody v-else-if="showSkeletonLoading" v-bind="bodyAttrs">
+          <tr
+            v-for="rowIndex in skeletonRowIndexes"
+            :key="`skeleton-row-${rowIndex}`"
+            v-bind="bodyRowAttrs"
+          >
+            <td v-if="selectable" v-bind="bodyCellCheckboxAttrs">
+              <USkeleton v-bind="skeletonCheckboxAttrs" />
+            </td>
+
+            <td
+              v-for="(column, columnIndex) in visibleColumns"
+              :key="`${column.key}-skeleton-${rowIndex}`"
+              v-bind="bodyCellBaseAttrs"
+              :style="getStickyColumnStyle(column)"
+            >
+              <USkeleton
+                v-bind="skeletonCellAttrs"
+                :class="getSkeletonWidthClass(columnIndex, rowIndex)"
+              />
+            </td>
+          </tr>
+        </tbody>
+
         <tbody v-else>
           <tr>
             <td :colspan="colsCount" v-bind="bodyEmptyStateCellAttrs">