feat: add automatic skeleton rows to Table by gethinwebster · Pull Request #4772 · cloudscape-design/components

gethinwebster · 2026-07-23T06:19:13Z

Adds automatic skeleton-row sizing to Table via skeleton={{ totalRows: 'auto' }}: during loading the table fills its available viewport with placeholder rows, and a post-render correction removes rows if the rendered page would overflow (never below one row).

Changes

Automatic skeleton rows in use-auto-skeleton-rows.ts, wired through Table internals and interfaces.
Unit + browser integration coverage: sticky header, footer, wrapLines on/off with long headers, and mixed data + skeleton rows (data rows always precede skeleton rows).
AppLayout console-shell dev pages (#/light/app-layout/auto-skeleton-table, ...-nowrap) with an external #h header and #f footer, matching a real console layout.

Testing

npm run build, npm run lint, and the table unit suites (17/17) pass.
Browser integration tests run in CI.
Row-count oscillation risk was investigated with a real headless-Chrome probe (forced overflow, container churn, seed-height mismatch) — no oscillation and no ResizeObserver-loop warnings.

codecov · 2026-07-23T08:08:19Z

Codecov Report

❌ Patch coverage is 98.79518% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 97.63%. Comparing base (f97729a) to head (c8e171c).
⚠️ Report is 12 commits behind head on main.

Files with missing lines	Patch %	Lines
src/table/use-auto-skeleton-rows.ts	98.46%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4772      +/-   ##
==========================================
+ Coverage   97.61%   97.63%   +0.01%     
==========================================
  Files         952      957       +5     
  Lines       30816    31097     +281     
  Branches    11318    11435     +117     
==========================================
+ Hits        30081    30361     +280     
- Misses        688      689       +1     
  Partials       47       47

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…layout

Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 2 comments.

+   * - `totalRows` ('auto') - The number of skeleton rows is calculated from the available viewport height.
+   * - `maxAutoRows` (number) - Limits the number of rows rendered when `totalRows` is set to `'auto'`.
+   * - `minAutoRows` (number) - Sets the minimum number of rows rendered when `totalRows` is set to `'auto'`.


Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

+  const minRowsValue = Math.max(1, minRows ?? 1);
+  const [rows, setRows] = useState(minRowsValue);
+  const rowHeightRef = useRef<number>();
+
+  const updateRows = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const tableRoot = tableRootRef.current;
+    const tableWrapper = tableWrapperRef.current;
+    const skeletonRows = tableBodyRef.current?.querySelectorAll<HTMLElement>(SKELETON_ROW_SELECTOR);
+    const firstSkeletonRowRect = skeletonRows?.[0]?.getBoundingClientRect();
+    const lastSkeletonRowRect = skeletonRows?.[skeletonRows.length - 1]?.getBoundingClientRect();
+    const rowHeight = lastSkeletonRowRect?.height ?? rowHeightRef.current;
+
+    if (!tableRoot || !tableWrapper || !firstSkeletonRowRect || !lastSkeletonRowRect || !rowHeight) {
+      return;
+    }
+
+    rowHeightRef.current = rowHeight;
+    const nextRows = calculateAutoSkeletonRows({
+      maxRows,
+      minRows: minRowsValue,
+      rowHeight,


Copilot

Pull request overview

Copilot reviewed 13 out of 13 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

src/table/use-auto-skeleton-rows.ts:57

getOverflowHeight picks the first ancestor with overflow-y: auto|scroll, even if it isn't actually overflowing. In layouts where an ancestor has overflow-y: auto but expands with content, this returns 0 and prevents the overflow-correction step from removing rows even when the document (or another ancestor) is overflowing.

function getOverflowHeight(element: HTMLElement) {
  const scrollContainer = getScrollableParents(element)[0];
  if (scrollContainer) {
    return Math.max(0, scrollContainer.scrollHeight - scrollContainer.clientHeight);
  }

gethinwebster deployed to dev-pages-react18 July 23, 2026 06:21 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 July 23, 2026 06:21 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 23, 2026 06:27 — with GitHub Actions View deployment

gethinwebster added 3 commits July 23, 2026 07:12

feat(table): add automatic skeleton rows

670f11c

fix(table): prevent auto skeleton overflow

7fcc3cb

test(table): cover auto skeleton layout features and add dev pages

6978122

gethinwebster changed the title ~~Table: fix auto skeleton row overflow + layout coverage~~ feat: add automatic skeleton rows to Table Jul 23, 2026

gethinwebster force-pushed the dev-v3-gethinw-table-auto-skeleton-rows branch from 5ba3e9e to 6978122 Compare July 23, 2026 07:22

gethinwebster deployed to dev-pages-react16 July 23, 2026 07:27 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 July 23, 2026 07:27 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 23, 2026 07:33 — with GitHub Actions View deployment

test(table): update documenter snapshot for auto skeleton rows

7ccb252

gethinwebster deployed to dev-pages-react18 July 23, 2026 07:59 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 July 23, 2026 07:59 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 23, 2026 08:05 — with GitHub Actions View deployment

test(table): cover auto skeleton document overflow fallback

e6780dc

gethinwebster deployed to dev-pages-react16 July 23, 2026 09:31 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 July 23, 2026 09:31 — with GitHub Actions View deployment

gethinwebster temporarily deployed to allure-report July 23, 2026 09:37 — with GitHub Actions Inactive

gethinwebster deployed to allure-report July 23, 2026 10:03 — with GitHub Actions View deployment

test(table): fix a11y violations on auto skeleton dev page

c7ecd28

gethinwebster deployed to dev-pages-react18 July 23, 2026 10:50 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 July 23, 2026 10:50 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 23, 2026 10:57 — with GitHub Actions View deployment

test(table): keep single wrapped AppLayout skeleton demo

8fa5da2

gethinwebster deployed to dev-pages-react16 July 23, 2026 12:59 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 July 23, 2026 12:59 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 23, 2026 13:05 — with GitHub Actions View deployment

refactor(table): reuse shared getScrollableParents for auto skeleton …

95c275f

…layout

gethinwebster deployed to dev-pages-react18 July 27, 2026 14:31 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 27, 2026 14:44 — with GitHub Actions View deployment

gethinwebster requested review from NathanZlion and Copilot July 27, 2026 15:37

Copilot started reviewing on behalf of gethinwebster July 27, 2026 15:38 View session

Copilot AI reviewed Jul 27, 2026

View reviewed changes

NathanZlion previously approved these changes Jul 27, 2026

View reviewed changes

fix: clamp minAutoRows to >=1 and clarify auto skeleton row docs

c740ae0

gethinwebster dismissed NathanZlion’s stale review via c740ae0 July 27, 2026 15:54

gethinwebster requested a review from Copilot July 27, 2026 15:58

Copilot started reviewing on behalf of gethinwebster July 27, 2026 16:04 View session

gethinwebster deployed to dev-pages-react18 July 27, 2026 16:05 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react16 July 27, 2026 16:05 — with GitHub Actions View deployment

Copilot AI reviewed Jul 27, 2026

View reviewed changes

gethinwebster deployed to allure-report July 27, 2026 16:15 — with GitHub Actions View deployment

fix: clamp minAutoRows to maxAutoRows and sanitize maxAutoRows to >=1

c8e171c

gethinwebster deployed to dev-pages-react16 July 28, 2026 07:04 — with GitHub Actions View deployment

gethinwebster deployed to dev-pages-react18 July 28, 2026 07:04 — with GitHub Actions View deployment

gethinwebster deployed to allure-report July 28, 2026 07:12 — with GitHub Actions View deployment

gethinwebster requested a review from Copilot July 28, 2026 07:19

Copilot started reviewing on behalf of gethinwebster July 28, 2026 07:20 View session

Copilot AI reviewed Jul 28, 2026

View reviewed changes

gethinwebster requested a review from NathanZlion July 28, 2026 07:30

NathanZlion approved these changes Jul 28, 2026

View reviewed changes

gethinwebster added this pull request to the merge queue Jul 28, 2026

github-merge-queue Bot removed this pull request from the merge queue due to no response for status checks Jul 28, 2026

gethinwebster added this pull request to the merge queue Jul 28, 2026

Merged via the queue into main with commit 0c21452 Jul 28, 2026
94 of 95 checks passed

gethinwebster deleted the dev-v3-gethinw-table-auto-skeleton-rows branch July 28, 2026 12:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: add automatic skeleton rows to Table - #4772

feat: add automatic skeleton rows to Table#4772
gethinwebster merged 11 commits into
mainfrom
dev-v3-gethinw-table-auto-skeleton-rows

gethinwebster commented Jul 23, 2026 •

edited

Loading

Uh oh!

codecov Bot commented Jul 23, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

gethinwebster commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jul 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

gethinwebster commented Jul 23, 2026 •

edited

Loading

codecov Bot commented Jul 23, 2026 •

edited

Loading