From 3ace9c54db6dca0d0a114b0782bba7cd14a90fe2 Mon Sep 17 00:00:00 2001
From: Jonathan Roebuck <jroebuck@spotify.com>
Date: Fri, 13 Mar 2026 09:57:41 +0000
Subject: [PATCH] feat(ui): add separate loading prop to TableRoot

Use spread for conditional selection props. Add a dedicated loading
prop and data-loading data attribute to TableRoot, distinct from
stale. Both set aria-busy and default to the same opacity, but
consumers can now style them independently.

Signed-off-by: Jonathan Roebuck <jroebuck@spotify.com>
---
 packages/ui/report.api.md                         |  4 ++++
 packages/ui/src/components/Table/Table.module.css |  3 ++-
 .../ui/src/components/Table/components/Table.tsx  | 15 ++++++++++-----
 .../src/components/Table/components/TableRoot.tsx |  2 +-
 packages/ui/src/components/Table/definition.ts    |  1 +
 packages/ui/src/components/Table/types.ts         |  1 +
 6 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 834251f088..f2d326dc30 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -2332,6 +2332,9 @@ export const TableDefinition: {
     readonly stale: {
       readonly dataAttribute: true;
     };
+    readonly loading: {
+      readonly dataAttribute: true;
+    };
   };
 };
 
@@ -2449,6 +2452,7 @@ export const TableRoot: (props: TableRootProps) => JSX_2.Element;
 // @public (undocumented)
 export type TableRootOwnProps = {
   stale?: boolean;
+  loading?: boolean;
 };
 
 // @public (undocumented)
diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css
index 55cf235e56..472e0733ac 100644
--- a/packages/ui/src/components/Table/Table.module.css
+++ b/packages/ui/src/components/Table/Table.module.css
@@ -24,7 +24,8 @@
     table-layout: fixed;
     transition: opacity 0.2s ease-in-out;
 
-    &[data-stale='true'] {
+    &[data-stale='true'],
+    &[data-loading='true'] {
       opacity: 0.6;
     }
   }
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index 6ad1fa96ae..96e7cfe166 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -159,14 +159,19 @@ export function Table<T extends TableItem>({
       </VisuallyHidden>
       {wrapResizable(
         <TableRoot
-          selectionMode={isInitialLoading ? undefined : selectionMode}
-          selectionBehavior={isInitialLoading ? undefined : selectionBehavior}
-          selectedKeys={isInitialLoading ? undefined : selectedKeys}
-          onSelectionChange={isInitialLoading ? undefined : onSelectionChange}
+          {...(isInitialLoading
+            ? {}
+            : {
+                selectionMode,
+                selectionBehavior,
+                selectedKeys,
+                onSelectionChange,
+              })}
           sortDescriptor={sort?.descriptor ?? undefined}
           onSortChange={sort?.onSortChange}
           disabledKeys={disabledRows}
-          stale={isStale || isInitialLoading}
+          stale={isStale}
+          loading={isInitialLoading}
           aria-describedby={liveRegionId}
         >
           <TableHeader columns={visibleColumns}>
diff --git a/packages/ui/src/components/Table/components/TableRoot.tsx b/packages/ui/src/components/Table/components/TableRoot.tsx
index af96d1809e..223e9d648b 100644
--- a/packages/ui/src/components/Table/components/TableRoot.tsx
+++ b/packages/ui/src/components/Table/components/TableRoot.tsx
@@ -30,7 +30,7 @@ export const TableRoot = (props: TableRootProps) => {
     <ReactAriaTable
       className={ownProps.classes.root}
       aria-label="Data table"
-      aria-busy={ownProps.stale}
+      aria-busy={ownProps.stale || ownProps.loading}
       {...dataAttributes}
       {...restProps}
     />
diff --git a/packages/ui/src/components/Table/definition.ts b/packages/ui/src/components/Table/definition.ts
index eb41617b93..1c3953a19a 100644
--- a/packages/ui/src/components/Table/definition.ts
+++ b/packages/ui/src/components/Table/definition.ts
@@ -38,6 +38,7 @@ export const TableDefinition = defineComponent<TableRootOwnProps>()({
   },
   propDefs: {
     stale: { dataAttribute: true },
+    loading: { dataAttribute: true },
   },
 });
 
diff --git a/packages/ui/src/components/Table/types.ts b/packages/ui/src/components/Table/types.ts
index 099a855d33..0736afa05b 100644
--- a/packages/ui/src/components/Table/types.ts
+++ b/packages/ui/src/components/Table/types.ts
@@ -42,6 +42,7 @@ export interface SortState {
 /** @public */
 export type TableRootOwnProps = {
   stale?: boolean;
+  loading?: boolean;
 };
 
 /** @public */