From b58c4588d27e3c8a691dd8314634adb458c82f1a Mon Sep 17 00:00:00 2001
From: paanSinghCoder <gaurav3017@gmail.com>
Date: Thu, 21 May 2026 12:59:55 +0530
Subject: [PATCH] fix(data-table): show skeleton on first load in virtualized
 tables

The `isLoading && rows.length > 0` guard in `VirtualizedContent`
suppressed the skeleton on initial load (when `rows.length === 0`),
leaving consumers with an empty table body until data arrived. Drop the
`rows.length > 0` half of the guard so the skeleton renders for both
the first-load and pagination-refetch cases.

Also remove the explicit `height: rowHeight` on loader rows so they size
from intrinsic cell padding, matching the non-virtualized
`DataTable.Content` loader.

Same fix applied to `data-view-beta/VirtualizedContent`.
---
 .../data-table/components/virtualized-content.tsx           | 6 +-----
 .../data-view-beta/components/virtualized-content.tsx       | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/raystack/components/data-table/components/virtualized-content.tsx b/packages/raystack/components/data-table/components/virtualized-content.tsx
index 11da4fbc5..851c1cc0a 100644
--- a/packages/raystack/components/data-table/components/virtualized-content.tsx
+++ b/packages/raystack/components/data-table/components/virtualized-content.tsx
@@ -167,13 +167,11 @@ function VirtualRows<TData>({
 
 function VirtualLoaderRows({
   columns,
-  rowHeight,
   count
 }: {
   columns: ReturnType<
     ReturnType<typeof useDataTable>['table']['getVisibleLeafColumns']
   >;
-  rowHeight: number;
   count: number;
 }) {
   return (
@@ -183,7 +181,6 @@ function VirtualLoaderRows({
           role='row'
           key={'loading-row-' + rowIndex}
           className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}
-          style={{ height: rowHeight }}
         >
           {columns.map((col, colIndex) => {
             const columnDef = col.columnDef as DataTableColumnDef<
@@ -267,7 +264,7 @@ export function VirtualizedContent({
     return list;
   }, [rows, groupHeaderHeight, rowHeight]);
 
-  const showLoaderRows = isLoading && rows.length > 0;
+  const showLoaderRows = isLoading;
 
   const virtualizer = useVirtualizer({
     count: rows.length,
@@ -386,7 +383,6 @@ export function VirtualizedContent({
       {showLoaderRows && (
         <VirtualLoaderRows
           columns={visibleColumns}
-          rowHeight={rowHeight}
           count={loadingRowCount}
         />
       )}
diff --git a/packages/raystack/components/data-view-beta/components/virtualized-content.tsx b/packages/raystack/components/data-view-beta/components/virtualized-content.tsx
index 9eabfc67d..231b31e91 100644
--- a/packages/raystack/components/data-view-beta/components/virtualized-content.tsx
+++ b/packages/raystack/components/data-view-beta/components/virtualized-content.tsx
@@ -187,12 +187,10 @@ function VirtualRows<TData, TValue>({
 function VirtualLoaderRows<TData, TValue>({
   renderedAccessors,
   columnMap,
-  rowHeight,
   count
 }: {
   renderedAccessors: string[];
   columnMap: Map<string, DataViewTableColumn<TData, TValue>>;
-  rowHeight: number;
   count: number;
 }) {
   return (
@@ -202,7 +200,6 @@ function VirtualLoaderRows<TData, TValue>({
           role='row'
           key={'loading-row-' + rowIndex}
           className={cx(styles.virtualRow, styles['row'], styles.loaderRow)}
-          style={{ height: rowHeight }}
         >
           {renderedAccessors.map(accessor => {
             const spec = columnMap.get(accessor);
@@ -302,7 +299,7 @@ export function VirtualizedContent<TData, TValue = unknown>({
     return list;
   }, [rows]);
 
-  const showLoaderRows = isLoading && rows.length > 0;
+  const showLoaderRows = isLoading;
 
   const virtualizer = useVirtualizer({
     count: rows.length,
@@ -421,7 +418,6 @@ export function VirtualizedContent<TData, TValue = unknown>({
         <VirtualLoaderRows
           renderedAccessors={renderedAccessors}
           columnMap={columnMap}
-          rowHeight={rowHeight}
           count={loadingRowCount}
         />
       )}