fix(data-table): show skeleton on first load in virtualized tables

[paanSinghCoder]

Summary

DataTable.VirtualizedContent (and DataView beta) was not rendering the skeleton loader on initial load. The guard

const showLoaderRows = isLoading && rows.length > 0;

required existing rows for the skeleton to render, which only ever fires on pagination/refetch — never on first load (rows.length === 0). Consumers saw an empty table body under the headers until data arrived. The non-virtualized DataTable.Content does not have this gap.

Drop && rows.length > 0 so the skeleton renders for both first-load and refetch cases. Also remove the explicit height: rowHeight from each loader row so it sizes from intrinsic cell padding — matching the height of the non-virtualized LoaderRows. Same change applied to data-view-beta.

Behavior matrix

Scenario	Before	After
First load (cold)	Blank body	Skeleton renders
Pagination / infinite-scroll fetch	Skeleton at bottom	Skeleton at bottom (unchanged)
Refetch with existing rows	Skeleton at bottom	Skeleton at bottom (unchanged)
Search returning 0 results, mid-fetch	Blank briefly → empty state	Skeleton briefly → empty state

Only the last row is a visible behavior change, and arguably an improvement (signals "we're fetching" instead of flashing blank).

Test plan

• In apps/www /examples/datatable-virtual, refresh — skeleton should appear on first load
• Trigger a paginated fetch — skeleton still appears below existing rows
• Compare loader row height with DataTable.Content (non-virtualized) loader — should match

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	May 21, 2026 7:32am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2cdc8eb1-7231-4042-8184-55c6ee195986

📥 Commits

Reviewing files that changed from the base of the PR and between b99d0f5 and b58c458.

📒 Files selected for processing (2)

• packages/raystack/components/data-table/components/virtualized-content.tsx
• packages/raystack/components/data-view-beta/components/virtualized-content.tsx

---

📝 Walkthrough

Walkthrough

This PR refactors loader skeleton rendering in two virtualized data components. The VirtualLoaderRows component definition was updated to remove the rowHeight prop and associated inline height styling in both data-table and data-view-beta packages. The loader row visibility condition was simplified to show loader rows whenever isLoading is true, even when no rows exist yet. Call sites for VirtualLoaderRows were updated to stop passing the rowHeight prop.

Suggested reviewers

• rohanchkrabrty

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and specifically describes the main change: fixing the skeleton loader to show on first load in virtualized tables.
Description check	✅ Passed	The description comprehensively explains the problem, solution, behavior changes, and includes a detailed test plan directly related to the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}