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

Adds an “auto” mode for Table skeleton rows so loading states can fill the available vertical viewport with placeholder rows, including a post-render overflow correction and coverage across unit + browser integration scenarios.

Changes:

Introduces useAutoSkeletonRows and wires it into Table rendering so skeleton={{ totalRows: 'auto' }} computes skeleton row count from viewport constraints (optionally capped via maxAutoRows).
Extends the public skeleton configuration type and updates feature-metrics reporting for auto mode.
Adds unit + browser integration tests plus dev/demo pages to validate behavior with nested scroll containers, sticky header/footer, wrapLines, mixed data+skeleton rows, and AppLayout page chrome.

Reviewed changes

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

Show a summary per file

File	Description
src/table/use-auto-skeleton-rows.ts	New hook to measure available viewport space and compute/correct skeleton row count.
src/table/internal.tsx	Integrates auto skeleton row calculation into Table rendering and refs.
src/table/interfaces.tsx	Updates `SkeletonConfig` to support `'auto'` + `maxAutoRows` and documents the new options.
src/table/index.tsx	Updates component metadata reporting to distinguish fixed vs automatic skeleton configuration.
src/table/tests/table-feature-metrics.test.tsx	Adds unit coverage for metrics emitted by automatic vs fixed skeleton config.
src/table/tests/skeleton.test.tsx	Adds unit coverage for auto sizing, overflow correction, caps, and ordering with data rows.
src/table/integ/skeleton.test.ts	Adds browser integration coverage for nested scroll viewports, features, mixed rows, and AppLayout chrome.
src/internal/utils/scrollable-containers.ts	Adds `getScrollableParents` utility used for viewport detection.
src/tests/snapshot-tests/snapshots/documenter.test.ts.snap	Updates generated docs snapshot for the new union type + docs text.
pages/table/skeleton-rows.page.tsx	Adds a dev-page toggle to switch between fixed and auto skeleton rows.
pages/table/auto-skeleton-rows.page.tsx	New dev page exercising auto skeleton rows across layout permutations.
pages/app-layout/auto-skeleton-table.page.tsx	New dev page validating auto skeleton rows inside AppLayout with external header/footer.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

NathanZlion · 2026-07-27T13:41:27Z

+ * Returns the element's ancestors whose computed `overflow-y` is `auto` or `scroll`,
+ * ordered nearest-first. These are the ancestors capable of producing a vertical scrollbar.
+ */
+export function getScrollableParents(element: HTMLElement): HTMLElement[] {


Do we have a test for this?

implicitly, but now added an explicit test too

NathanZlion · 2026-07-27T13:49:28Z

-  export interface SkeletonConfig {
-    totalRows: number;
-  }
+  export type SkeletonConfig = { totalRows: number; maxAutoRows?: never } | { totalRows: 'auto'; maxAutoRows?: number };


can we do union types that are named in the namespace for these instead of inline one, it'll make it more readable I think? Just like we do for ColumnDisplayProperties = ColumnDisplay | GroupDisplay; Maybe something like AutoConfig and FixedConfig or AutoSkeletonConfig,

good point, updated

gethinwebster · 2026-07-27T15:39:02Z

Sign in to view

+
+import { getScrollableParents } from '../internal/utils/scrollable-containers';
+
+const AUTO_SKELETON_VIEWPORT_BUFFER = 16;


In my testing it needed a certain amount of buffer away from the bottom to prevent often over-shooting with measurements because things shift around the page a little during loading. So no specific reason for this number rather than another close number, but some buffer is needed

…on; test getScrollableParents

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

Copilot AI reviewed Jul 27, 2026

View reviewed changes

NathanZlion reviewed Jul 27, 2026

View reviewed changes

NathanZlion self-requested a review July 27, 2026 13:52

NathanZlion reviewed Jul 27, 2026

View reviewed changes

feat: add minAutoRows to Table auto skeleton; name SkeletonConfig uni…

4b75451

…on; test getScrollableParents

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

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

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 wants to merge 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!

NathanZlion Jul 27, 2026

Uh oh!

gethinwebster Jul 27, 2026

Uh oh!

NathanZlion Jul 27, 2026

Uh oh!

gethinwebster Jul 27, 2026

Uh oh!

This comment was marked as resolved.

Uh oh!

gethinwebster Jul 27, 2026

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants


		import { getScrollableParents } from '../internal/utils/scrollable-containers';

		const AUTO_SKELETON_VIEWPORT_BUFFER = 16;

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

Reviewed changes

Uh oh!

NathanZlion Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

gethinwebster Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

NathanZlion Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

gethinwebster Jul 27, 2026

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

gethinwebster Jul 27, 2026

Choose a reason for hiding this comment

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!

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