From 6f56a0c0b05d49c2cf8df9f055e996323dc6bcbe Mon Sep 17 00:00:00 2001
From: Jonathan Roebuck <jroebuck@spotify.com>
Date: Thu, 12 Mar 2026 16:40:29 +0000
Subject: [PATCH] fix(ui): address review feedback for Table skeleton loading

- Add @testing-library/jest-dom and @testing-library/react as explicit
  devDependencies for @backstage/ui
- Disable selection on TableRoot during initial loading to prevent
  interaction with skeleton rows
- Clarify test comment about aria-busy vs data-stale behavior

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
---
 packages/ui/package.json                                  | 2 ++
 .../ui/src/components/Table/components/Table.test.tsx     | 4 ++--
 packages/ui/src/components/Table/components/Table.tsx     | 8 ++++----
 yarn.lock                                                 | 2 ++
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/ui/package.json b/packages/ui/package.json
index a1df4bcf8a..ce979d58d2 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -55,6 +55,8 @@
   },
   "devDependencies": {
     "@backstage/cli": "workspace:^",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/use-sync-external-store": "^0.0.6",
diff --git a/packages/ui/src/components/Table/components/Table.test.tsx b/packages/ui/src/components/Table/components/Table.test.tsx
index 355c780413..f10d672af4 100644
--- a/packages/ui/src/components/Table/components/Table.test.tsx
+++ b/packages/ui/src/components/Table/components/Table.test.tsx
@@ -59,8 +59,8 @@ describe('Table', () => {
       expect(rows).toHaveLength(6);
 
       // Table should indicate it's in a loading/stale state via data-stale
-      // (react-aria-components Table renders this as a data attribute rather
-      // than aria-busy on the DOM element)
+      // (react-aria-components' Table does not forward aria-busy to the DOM,
+      // but the stale prop produces a data-stale attribute for CSS targeting)
       expect(table).toHaveAttribute('data-stale', 'true');
 
       // Each skeleton row should contain Skeleton placeholder elements
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index af9ff3f40c..e5f519b8e5 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -151,10 +151,10 @@ export function Table<T extends TableItem>({
       </VisuallyHidden>
       {wrapResizable(
         <TableRoot
-          selectionMode={selectionMode}
-          selectionBehavior={selectionBehavior}
-          selectedKeys={selectedKeys}
-          onSelectionChange={onSelectionChange}
+          selectionMode={isInitialLoading ? undefined : selectionMode}
+          selectionBehavior={isInitialLoading ? undefined : selectionBehavior}
+          selectedKeys={isInitialLoading ? undefined : selectedKeys}
+          onSelectionChange={isInitialLoading ? undefined : onSelectionChange}
           sortDescriptor={sort?.descriptor ?? undefined}
           onSortChange={sort?.onSortChange}
           disabledKeys={disabledRows}
diff --git a/yarn.lock b/yarn.lock
index fbc65dcfdf..52709955fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7652,6 +7652,8 @@ __metadata:
     "@backstage/version-bridge": "workspace:^"
     "@remixicon/react": "npm:^4.6.0"
     "@tanstack/react-table": "npm:^8.21.3"
+    "@testing-library/jest-dom": "npm:^6.0.0"
+    "@testing-library/react": "npm:^16.0.0"
     "@types/react": "npm:^18.0.0"
     "@types/react-dom": "npm:^18.0.0"
     "@types/use-sync-external-store": "npm:^0.0.6"