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

@@ -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)

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;
     }
   }

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}>

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}
     />

packages/ui/src/components/Table/definition.ts

@@ -38,6 +38,7 @@ export const TableDefinition = defineComponent<TableRootOwnProps>()({
   },
   propDefs: {
     stale: { dataAttribute: true },
+    loading: { dataAttribute: true },
   },
 });
 

packages/ui/src/components/Table/types.ts

@@ -42,6 +42,7 @@ export interface SortState {
 /** @public */
 export type TableRootOwnProps = {
   stale?: boolean;
+  loading?: boolean;
 };
 
 /** @public */