diff --git a/.changeset/api-keys-panel-skeleton.md b/.changeset/api-keys-panel-skeleton.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/api-keys-panel-skeleton.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/table/table.styles.ts b/packages/mosaic/src/components/table/table.styles.ts
index ed80339534b..a6c711862e9 100644
--- a/packages/mosaic/src/components/table/table.styles.ts
+++ b/packages/mosaic/src/components/table/table.styles.ts
@@ -51,6 +51,9 @@ export const styles = stylex.create({
     verticalAlign: 'middle',
     whiteSpace: 'nowrap',
   },
+  headerCellSkeleton: {
+    width: '8ch',
+  },
   sortableHeaderCell: {
     paddingBlock: space['1.5'],
     paddingInline: space['2'],
@@ -67,6 +70,9 @@ export const styles = stylex.create({
     lineHeight: typeScaleVars['--cl-text-sm-leading'],
     verticalAlign: 'middle',
   },
+  cellSkeleton: {
+    width: '11ch',
+  },
   selectCell: {
     lineHeight: 0,
     paddingInlineEnd: 0,
diff --git a/packages/mosaic/src/components/table/table.test.tsx b/packages/mosaic/src/components/table/table.test.tsx
index 04a40af9ca5..4012443a20b 100644
--- a/packages/mosaic/src/components/table/table.test.tsx
+++ b/packages/mosaic/src/components/table/table.test.tsx
@@ -321,4 +321,57 @@ describe('Mosaic Table', () => {
       expect(screen.getByRole('cell')).toHaveAttribute('colspan', '1000');
     });
   });
+
+  describe('skeleton', () => {
+    it('hides a skeleton table and turns its cells into placeholders', () => {
+      const { container } = render(
+        <Table.Root skeleton>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+              <Table.HeaderCell skeleton={false}>Actions</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Web app</Table.Cell>
+              <Table.Cell skeleton={false}>Menu</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>,
+      );
+
+      const shell = container.querySelector('.cl-table-shell');
+      expect(shell).toHaveAttribute('aria-hidden', 'true');
+      expect(shell).toHaveAttribute('inert');
+      expect(shell).not.toHaveTextContent('Name');
+      expect(shell).not.toHaveTextContent('Web app');
+      expect(shell).toHaveTextContent('Actions');
+      expect(shell).toHaveTextContent('Menu');
+      expect(container.querySelectorAll('th[data-skeleton], td[data-skeleton]')).toHaveLength(2);
+    });
+
+    it('turns only the body into placeholders when the body is a skeleton', () => {
+      const { container } = render(
+        <Table.Root>
+          <Table.Header>
+            <Table.Row>
+              <Table.HeaderCell>Name</Table.HeaderCell>
+            </Table.Row>
+          </Table.Header>
+          <Table.Body skeleton>
+            <Table.Row>
+              <Table.Cell>Web app</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>,
+      );
+
+      expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+      const body = container.querySelector('tbody');
+      expect(body).toHaveAttribute('aria-hidden', 'true');
+      expect(body).toHaveAttribute('inert');
+      expect(body).not.toHaveTextContent('Web app');
+    });
+  });
 });
diff --git a/packages/mosaic/src/components/table/table.tsx b/packages/mosaic/src/components/table/table.tsx
index f13a8e56ac6..8a3a74252a7 100644
--- a/packages/mosaic/src/components/table/table.tsx
+++ b/packages/mosaic/src/components/table/table.tsx
@@ -1,11 +1,14 @@
+import { inertProps } from '@clerk/shared/inert';
 import { useMergeRefs } from '@floating-ui/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import { useSkeletonWave } from '../../hooks/use-skeleton-wave';
 import { useRender } from '../../primitives/utils';
 import type { MosaicComponentProps, MosaicElementProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
 import { reset } from '../../styles/reset.styles';
+import { skeletonStyles } from '../../styles/skeleton.styles';
 import { Button } from '../button';
 import type { CheckboxProps } from '../checkbox';
 import { Checkbox } from '../checkbox';
@@ -19,11 +22,18 @@ type TableSection = 'header' | 'body';
 
 const TableSectionContext = React.createContext<TableSection>('body');
 
+const TableSkeletonContext = React.createContext(false);
+
+function useInheritedSkeleton(skeleton: boolean | undefined) {
+  const inherited = React.useContext(TableSkeletonContext);
+  return skeleton ?? inherited;
+}
+
 export type TableAlign = keyof typeof aligns;
 
 export type TableSort = 'ascending' | 'descending' | 'none';
 
-export type TableProps = MosaicElementProps<'table'>;
+export type TableProps = MosaicElementProps<'table'> & { skeleton?: boolean };
 
 export type TableToolbarProps = MosaicComponentProps<'div'>;
 
@@ -94,9 +104,18 @@ const Search = React.forwardRef<HTMLInputElement, TableSearchProps>(function Mos
   );
 });
 
-const Root = React.forwardRef<HTMLTableElement, TableProps>(function MosaicTable({ xstyle, ...rest }, ref) {
+const Root = React.forwardRef<HTMLTableElement, TableProps>(function MosaicTable(
+  { skeleton = false, xstyle, ...rest },
+  ref,
+) {
   return (
-    <div {...mergeStyleProps(themeProps('table-shell'), stylex.props(reset.base, scrollAreaRoot, styles.shell))}>
+    <div
+      {...(skeleton ? { 'aria-hidden': true, ...inertProps(true) } : {})}
+      {...mergeStyleProps(
+        themeProps('table-shell', { skeleton }),
+        stylex.props(reset.base, scrollAreaRoot, styles.shell),
+      )}
+    >
       <div
         // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Safari does not focus an overflowing scroll container on its own, and a table without sortable or selectable cells holds nothing focusable.
         tabIndex={0}
@@ -105,10 +124,12 @@ const Root = React.forwardRef<HTMLTableElement, TableProps>(function MosaicTable
           stylex.props(reset.base, scrollAreaViewport('auto', 'inline'), styles.viewport),
         )}
       >
-        <table
-          ref={ref}
-          {...mergeStyleProps(themeProps('table'), stylex.props(reset.base, styles.table, xstyle), rest)}
-        />
+        <TableSkeletonContext.Provider value={skeleton}>
+          <table
+            ref={ref}
+            {...mergeStyleProps(themeProps('table'), stylex.props(reset.base, styles.table, xstyle), rest)}
+          />
+        </TableSkeletonContext.Provider>
       </div>
     </div>
   );
@@ -129,19 +150,27 @@ const Header = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(funct
   return <TableSectionContext.Provider value='header'>{element}</TableSectionContext.Provider>;
 });
 
-export type TableBodyProps = MosaicComponentProps<'tbody'>;
+export type TableBodyProps = MosaicComponentProps<'tbody'> & { skeleton?: boolean };
 
 const Body = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(function MosaicTableBody(
-  { render, xstyle, ...rest },
+  { skeleton: skeletonProp, render, xstyle, ...rest },
   ref,
 ) {
+  const skeleton = useInheritedSkeleton(skeletonProp);
   const element = useRender({
     defaultTagName: 'tbody',
     render,
     ref,
-    props: mergeStyleProps(themeProps('table-body'), stylex.props(reset.base, xstyle), rest),
+    props: {
+      ...(skeletonProp ? { 'aria-hidden': true, ...inertProps(true) } : {}),
+      ...mergeStyleProps(themeProps('table-body', { skeleton }), stylex.props(reset.base, xstyle), rest),
+    },
   });
-  return <TableSectionContext.Provider value='body'>{element}</TableSectionContext.Provider>;
+  return (
+    <TableSectionContext.Provider value='body'>
+      <TableSkeletonContext.Provider value={skeleton}>{element}</TableSkeletonContext.Provider>
+    </TableSectionContext.Provider>
+  );
 });
 
 export interface TableRowProps extends MosaicComponentProps<'tr'> {
@@ -170,6 +199,7 @@ export interface TableHeaderCellProps extends Omit<MosaicComponentProps<'th'>, '
   align?: TableAlign;
   sort?: TableSort;
   onSort?: () => void;
+  skeleton?: boolean;
 }
 
 const sortIcons = {
@@ -179,10 +209,12 @@ const sortIcons = {
 } as const;
 
 const HeaderCell = React.forwardRef<HTMLTableCellElement, TableHeaderCellProps>(function MosaicTableHeaderCell(
-  { align = 'start', sort = 'none', onSort, children, render, xstyle, ...rest },
+  { align = 'start', sort = 'none', onSort, skeleton: skeletonProp, children, render, xstyle, ...rest },
   ref,
 ) {
-  const sortable = onSort !== undefined;
+  const skeleton = useInheritedSkeleton(skeletonProp);
+  const wave = useSkeletonWave<HTMLSpanElement>(skeleton);
+  const sortable = onSort !== undefined && !skeleton;
   return useRender({
     defaultTagName: 'th',
     render,
@@ -190,12 +222,22 @@ const HeaderCell = React.forwardRef<HTMLTableCellElement, TableHeaderCellProps>(
     props: {
       scope: 'col',
       ...mergeStyleProps(
-        themeProps('table-header-cell', { align, sortable, sort: sortable && sort !== 'none' ? sort : undefined }),
+        themeProps('table-header-cell', {
+          align,
+          sortable,
+          sort: sortable && sort !== 'none' ? sort : undefined,
+          skeleton,
+        }),
         stylex.props(reset.base, styles.headerCell, aligns[align], sortable && styles.sortableHeaderCell, xstyle),
         { 'aria-sort': sortable && sort !== 'none' ? sort : undefined },
         rest,
       ),
-      children: sortable ? (
+      children: skeleton ? (
+        <span
+          ref={wave}
+          {...stylex.props(skeletonStyles.bone, skeletonStyles.wave, skeletonStyles.line, styles.headerCellSkeleton)}
+        />
+      ) : sortable ? (
         <Button
           variant='ghost'
           color='neutral'
@@ -220,21 +262,34 @@ const HeaderCell = React.forwardRef<HTMLTableCellElement, TableHeaderCellProps>(
 export interface TableCellProps extends Omit<MosaicComponentProps<'td'>, 'align'> {
   align?: TableAlign;
   noWrap?: boolean;
+  skeleton?: boolean;
 }
 
 const Cell = React.forwardRef<HTMLTableCellElement, TableCellProps>(function MosaicTableCell(
-  { align = 'start', noWrap = false, render, xstyle, ...rest },
+  { align = 'start', noWrap = false, skeleton: skeletonProp, children, render, xstyle, ...rest },
   ref,
 ) {
+  const skeleton = useInheritedSkeleton(skeletonProp);
+  const wave = useSkeletonWave<HTMLSpanElement>(skeleton);
   return useRender({
     defaultTagName: 'td',
     render,
     ref,
-    props: mergeStyleProps(
-      themeProps('table-cell', { align, noWrap }),
-      stylex.props(reset.base, styles.cell, aligns[align], noWrap && styles.noWrap, xstyle),
-      rest,
-    ),
+    props: {
+      ...mergeStyleProps(
+        themeProps('table-cell', { align, noWrap, skeleton }),
+        stylex.props(reset.base, styles.cell, aligns[align], noWrap && styles.noWrap, xstyle),
+        rest,
+      ),
+      children: skeleton ? (
+        <span
+          ref={wave}
+          {...stylex.props(skeletonStyles.bone, skeletonStyles.wave, skeletonStyles.line, styles.cellSkeleton)}
+        />
+      ) : (
+        children
+      ),
+    },
   });
 });
 
diff --git a/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.view.test.tsx b/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.view.test.tsx
new file mode 100644
index 00000000000..fd8342f452f
--- /dev/null
+++ b/packages/mosaic/src/features/api-keys/__tests__/api-keys-table.view.test.tsx
@@ -0,0 +1,99 @@
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { apiKeysTableMessages, resolveAPIKeysTableMessages } from '../api-keys-table.messages';
+import { APIKeysTableSkeleton } from '../api-keys-table.skeleton';
+import type { APIKey, APIKeysTableViewProps } from '../api-keys-table.types';
+import { APIKeysTableView } from '../api-keys-table.view';
+
+const messages = resolveAPIKeysTableMessages(apiKeysTableMessages, 'user');
+
+const keys = (count: number, start = 1): APIKey[] =>
+  Array.from({ length: count }, (_, index) => ({
+    id: `ak_${start + index}`,
+    name: `Key ${start + index}`,
+    createdAtLabel: 'Jan 5, 2026',
+    expiresAtLabel: null,
+    lastUsedAtLabel: null,
+  }));
+
+function props(overrides: Partial<APIKeysTableViewProps> = {}): APIKeysTableViewProps {
+  return {
+    messages,
+    apiKeys: keys(10),
+    totalCount: 12,
+    page: 1,
+    searchValue: '',
+    isLoading: false,
+    onPageChange: vi.fn(),
+    onSearchChange: vi.fn(),
+    refetchSkeleton: true,
+    ...overrides,
+  };
+}
+
+const bodyRows = (container: HTMLElement) => container.querySelectorAll('tbody tr');
+
+describe('APIKeysTableView skeleton', () => {
+  it('renders the first load as three placeholder rows behind a loading status', () => {
+    const { container } = render(<APIKeysTableSkeleton />);
+
+    expect(screen.getByRole('status')).toHaveTextContent(messages.loading);
+    expect(screen.queryByRole('table')).toBeNull();
+    expect(screen.queryByRole('searchbox')).toBeNull();
+    expect(screen.queryByRole('button')).toBeNull();
+    expect(bodyRows(container)).toHaveLength(3);
+    expect(container.querySelector('tbody')).not.toHaveTextContent('API key');
+  });
+
+  it('shows exactly the rows of the next page while it loads', async () => {
+    const view = props();
+    const { container, rerender } = render(<APIKeysTableView {...view} />);
+
+    await userEvent.click(screen.getByRole('button', { name: messages.nextPage }));
+    expect(view.onPageChange).toHaveBeenCalledWith(2);
+    rerender(
+      <APIKeysTableView
+        {...view}
+        page={2}
+        isFetching
+      />,
+    );
+
+    expect(bodyRows(container)).toHaveLength(2);
+    expect(container.querySelector('tbody')).toHaveAttribute('aria-hidden', 'true');
+    expect(screen.getByRole('columnheader', { name: messages.name })).toBeInTheDocument();
+    expect(screen.getByRole('status')).toHaveTextContent(messages.loading);
+  });
+
+  it('shows three rows while a new search loads', async () => {
+    const view = props();
+    const { container, rerender } = render(<APIKeysTableView {...view} />);
+
+    await userEvent.type(screen.getByRole('searchbox', { name: messages.search }), 'k');
+    expect(view.onSearchChange).toHaveBeenCalledWith('k');
+    rerender(
+      <APIKeysTableView
+        {...view}
+        searchValue='k'
+        isFetching
+      />,
+    );
+
+    expect(bodyRows(container)).toHaveLength(3);
+  });
+
+  it('keeps the current rows while fetching without refetchSkeleton', () => {
+    render(
+      <APIKeysTableView
+        {...props({ refetchSkeleton: false })}
+        page={2}
+        isFetching
+      />,
+    );
+
+    expect(within(screen.getByRole('table')).getByText('Key 1')).toBeInTheDocument();
+    expect(screen.queryByRole('status')).toBeNull();
+  });
+});
diff --git a/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx b/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx
new file mode 100644
index 00000000000..6379e1e8cc9
--- /dev/null
+++ b/packages/mosaic/src/features/api-keys/api-keys-table.skeleton.tsx
@@ -0,0 +1,27 @@
+import { useMessages } from '../../localization';
+import { resolveAPIKeysTableMessages } from './api-keys-table.messages';
+import { APIKeysTableView, placeholderAPIKeys } from './api-keys-table.view';
+
+const PLACEHOLDER_API_KEYS = placeholderAPIKeys(3);
+
+const noop = () => undefined;
+
+export function APIKeysTableSkeleton() {
+  const messages = resolveAPIKeysTableMessages(useMessages('apiKeysTable'), 'user');
+
+  return (
+    <APIKeysTableView
+      skeleton
+      messages={messages}
+      apiKeys={PLACEHOLDER_API_KEYS}
+      totalCount={PLACEHOLDER_API_KEYS.length}
+      page={1}
+      searchValue=''
+      isLoading={false}
+      onPageChange={noop}
+      onSearchChange={noop}
+      onCreate={noop}
+      onRevoke={() => Promise.resolve()}
+    />
+  );
+}
diff --git a/packages/mosaic/src/features/api-keys/api-keys-table.styles.ts b/packages/mosaic/src/features/api-keys/api-keys-table.styles.ts
index 357f2a1cd39..db5413837a8 100644
--- a/packages/mosaic/src/features/api-keys/api-keys-table.styles.ts
+++ b/packages/mosaic/src/features/api-keys/api-keys-table.styles.ts
@@ -1,9 +1,18 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { fontWeightVars, space } from '../../tokens.stylex';
+import { fontWeightVars, space, typeScaleVars } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   root: { gap: space['6'], display: 'flex', flexDirection: 'column', width: '100%' },
   name: { fontWeight: fontWeightVars['--cl-font-medium'] },
   metadata: { gap: space['0.5'], display: 'flex', flexDirection: 'column', minWidth: '25ch' },
+  searchSkeleton: { height: space['8'], maxWidth: '100%', width: '17rem' },
+  createSkeleton: { height: space['8'], width: space['28'] },
+  nameSkeleton: { width: '12ch' },
+  metadataSkeleton: {
+    fontSize: typeScaleVars['--cl-text-xs-size'],
+    lineHeight: typeScaleVars['--cl-text-xs-leading'],
+    width: '20ch',
+  },
+  actionsSkeleton: { width: `calc(${space['7']} + 2 * ${space['4']})` },
 });
diff --git a/packages/mosaic/src/features/api-keys/api-keys-table.types.ts b/packages/mosaic/src/features/api-keys/api-keys-table.types.ts
index 1eedeb5181e..4cc65d48473 100644
--- a/packages/mosaic/src/features/api-keys/api-keys-table.types.ts
+++ b/packages/mosaic/src/features/api-keys/api-keys-table.types.ts
@@ -44,4 +44,6 @@ export interface APIKeysTableViewProps {
   onBulkAction?: (ids: string[]) => void;
   sort?: APIKeysTableSort | null;
   onSortChange?: (sort: APIKeysTableSort | null) => void;
+  skeleton?: boolean;
+  refetchSkeleton?: boolean;
 }
diff --git a/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx b/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx
index ba16708c493..b629c27354e 100644
--- a/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx
+++ b/packages/mosaic/src/features/api-keys/api-keys-table.view.tsx
@@ -12,9 +12,11 @@ import { Table } from '../../components/table';
 import { Text } from '../../components/text';
 import { VisuallyHidden } from '../../components/visually-hidden';
 import { useListRemovalFocus } from '../../hooks/use-list-removal-focus';
+import { useSkeletonWave } from '../../hooks/use-skeleton-wave';
 import { fill } from '../../localization';
 import { useDataTable } from '../../primitives/hooks';
 import { mergeStyleProps, themeProps } from '../../props';
+import { skeletonStyles } from '../../styles/skeleton.styles';
 import { truncateWithEndVisible } from '../../utils/truncate-text-with-end-visible';
 import { styles } from './api-keys-table.styles';
 import type { APIKey, APIKeysTableMessages, APIKeysTableSort, APIKeysTableViewProps } from './api-keys-table.types';
@@ -22,6 +24,18 @@ import { CreateAPIKeyDialog } from './create-api-key.dialog';
 
 const getRowId = (row: APIKey) => row.id;
 
+const PLACEHOLDER_ROW_COUNT = 3;
+
+export function placeholderAPIKeys(count: number): APIKey[] {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `placeholder_${index}`,
+    name: 'API key',
+    createdAtLabel: '',
+    expiresAtLabel: null,
+    lastUsedAtLabel: null,
+  }));
+}
+
 export function APIKeysTableView({
   messages: m,
   apiKeys,
@@ -42,7 +56,10 @@ export function APIKeysTableView({
   isFetching = false,
   isError = false,
   onRetry,
+  skeleton = false,
+  refetchSkeleton = false,
 }: APIKeysTableViewProps) {
+  const lastChange = useRef<'page' | 'search'>('page');
   const searchInput = useRef<HTMLInputElement>(null);
   const createButton = useRef<HTMLButtonElement>(null);
   const removalFocus = useListRemovalFocus({
@@ -61,6 +78,7 @@ export function APIKeysTableView({
       ? update => {
           const next = typeof update === 'function' ? update(table.sorting) : update;
           const active = next[0];
+          lastChange.current = 'page';
           table.setRowSelection({});
           onSortChange(
             active && (active.id === 'name' || active.id === 'createdAt' || active.id === 'lastUsed')
@@ -72,6 +90,7 @@ export function APIKeysTableView({
     pagination,
     onPaginationChange: update => {
       const next = typeof update === 'function' ? update(pagination) : update;
+      lastChange.current = 'page';
       table.setRowSelection({});
       if (next.pageSize !== pageSize) {
         onPageSizeChange?.(next.pageSize);
@@ -80,6 +99,7 @@ export function APIKeysTableView({
     },
     globalFilter: searchValue,
     onGlobalFilterChange: update => {
+      lastChange.current = 'search';
       table.setRowSelection({});
       onSearchChange(typeof update === 'function' ? update(searchValue) : update);
     },
@@ -101,31 +121,119 @@ export function APIKeysTableView({
     };
   };
   const columnCount = 3 + Number(Boolean(onRevoke)) + Number(Boolean(onBulkAction));
+  const rowsSkeleton = refetchSkeleton && isFetching && !skeleton && !isLoading;
+  const remaining = totalCount - (page - 1) * pageSize;
+  const placeholderRows = placeholderAPIKeys(
+    lastChange.current === 'page' && remaining > 0 ? Math.min(pageSize, remaining) : PLACEHOLDER_ROW_COUNT,
+  );
   const query = searchValue.trim();
+  const bones = skeleton || rowsSkeleton;
+  const renderRow = (apiKey: APIKey, row?: (typeof table.rows)[number]) => (
+    <Table.Row
+      key={apiKey.id}
+      selected={Boolean(onBulkAction) && Boolean(row?.getIsSelected())}
+    >
+      {onBulkAction ? (
+        <Table.SelectCell
+          aria-label={fill(m.select, { name: apiKey.name })}
+          checked={Boolean(row?.getIsSelected())}
+          onToggleSelected={row?.toggleSelected}
+        />
+      ) : null}
+      <Table.Cell skeleton={false}>
+        <div {...stylex.props(styles.metadata)}>
+          {bones ? (
+            <>
+              <Bone
+                line
+                xstyle={styles.nameSkeleton}
+              />
+              <Bone
+                line
+                xstyle={styles.metadataSkeleton}
+              />
+            </>
+          ) : (
+            <>
+              <Text xstyle={styles.name}>{apiKey.name}</Text>
+              <Text
+                size='xs'
+                color='foreground-secondary'
+              >
+                {truncateWithEndVisible(apiKey.id, 10, 4)} ·{' '}
+                <Text
+                  render={<span />}
+                  size='xs'
+                  color={apiKey.expiresAtLabel === null ? 'foreground-secondary' : 'warning'}
+                >
+                  {apiKey.expiresAtLabel === null
+                    ? m.neverExpires
+                    : fill(m.expires, {
+                        expiresDate: apiKey.expiresAtLabel,
+                      })}
+                </Text>
+              </Text>
+            </>
+          )}
+        </div>
+      </Table.Cell>
+      <Table.Cell noWrap>
+        <Text>{apiKey.createdAtLabel}</Text>
+      </Table.Cell>
+      <Table.Cell noWrap>
+        <Text>{apiKey.lastUsedAtLabel ?? m.neverUsed}</Text>
+      </Table.Cell>
+      {onRevoke ? (
+        <Table.Cell
+          align='end'
+          skeleton={false}
+          xstyle={bones && styles.actionsSkeleton}
+        >
+          {bones ? null : (
+            <APIKeyActions
+              messages={m}
+              apiKey={apiKey}
+              registerTrigger={removalFocus.registerTrigger}
+              onSelect={key => revokeKey.open(key)}
+            />
+          )}
+        </Table.Cell>
+      ) : null}
+    </Table.Row>
+  );
   const emptyState = query
     ? { label: m.empty, description: fill(m.emptyDescription, { query }) }
     : { label: m.noKeys, description: m.noKeysDescription };
   return (
     <>
-      <div {...mergeStyleProps(themeProps('api-keys-table'), stylex.props(styles.root))}>
-        <Table.Toolbar>
-          <Table.Search
-            ref={searchInput}
-            label={m.search}
-            clearLabel={m.clearSearch}
-            value={table.globalFilter}
-            onValueChange={table.setGlobalFilter}
-          />
-          {onCreate ? (
-            <Button
-              ref={createButton}
-              onClick={onCreate}
-            >
-              {m.create}
-            </Button>
-          ) : null}
-        </Table.Toolbar>
+      <div {...mergeStyleProps(themeProps('api-keys-table', { skeleton }), stylex.props(styles.root))}>
+        {skeleton || rowsSkeleton ? <VisuallyHidden role='status'>{m.loading}</VisuallyHidden> : null}
+        {skeleton ? (
+          <Table.Toolbar aria-hidden>
+            <Bone xstyle={styles.searchSkeleton} />
+            {onCreate ? <Bone xstyle={styles.createSkeleton} /> : null}
+          </Table.Toolbar>
+        ) : (
+          <Table.Toolbar>
+            <Table.Search
+              ref={searchInput}
+              label={m.search}
+              clearLabel={m.clearSearch}
+              value={table.globalFilter}
+              onValueChange={table.setGlobalFilter}
+            />
+            {onCreate ? (
+              <Button
+                ref={createButton}
+                onClick={onCreate}
+              >
+                {m.create}
+              </Button>
+            ) : null}
+          </Table.Toolbar>
+        )}
         <Table.Root
+          skeleton={skeleton}
           aria-label={m.title}
           aria-busy={isLoading || isFetching}
         >
@@ -143,22 +251,26 @@ export function APIKeysTableView({
               <Table.HeaderCell {...sortHeader('createdAt')}>{m.createdAt}</Table.HeaderCell>
               <Table.HeaderCell {...sortHeader('lastUsed')}>{m.lastUsed}</Table.HeaderCell>
               {onRevoke ? (
-                <Table.HeaderCell align='end'>
+                <Table.HeaderCell
+                  align='end'
+                  skeleton={false}
+                >
                   <VisuallyHidden>{m.actions}</VisuallyHidden>
                 </Table.HeaderCell>
               ) : null}
             </Table.Row>
           </Table.Header>
-          <Table.Body>
-            {/* TODO: Replace with a shared Table.Loading built on a Mosaic Skeleton component (skeleton rows sized to the columns). */}
-            {isLoading ? (
+          <Table.Body skeleton={rowsSkeleton || undefined}>
+            {rowsSkeleton ? (
+              placeholderRows.map(apiKey => renderRow(apiKey))
+            ) : isLoading && !skeleton ? (
               <Table.Empty colSpan={columnCount}>
                 <span role='status'>
                   <Spinner />
                   <VisuallyHidden>{m.loading}</VisuallyHidden>
                 </span>
               </Table.Empty>
-            ) : isError ? (
+            ) : isError && !skeleton ? (
               <Table.Empty colSpan={columnCount}>
                 <EmptyState.Root>
                   <EmptyState.Icon name='exclamation-circle' />
@@ -177,7 +289,7 @@ export function APIKeysTableView({
                   ) : null}
                 </EmptyState.Root>
               </Table.Empty>
-            ) : table.rows.length === 0 ? (
+            ) : table.rows.length === 0 && !skeleton ? (
               <Table.Empty colSpan={columnCount}>
                 <EmptyState.Root>
                   <EmptyState.Icon name='key' />
@@ -186,62 +298,11 @@ export function APIKeysTableView({
                 </EmptyState.Root>
               </Table.Empty>
             ) : (
-              table.rows.map(row => (
-                <Table.Row
-                  key={row.id}
-                  selected={Boolean(onBulkAction) && row.getIsSelected()}
-                >
-                  {onBulkAction ? (
-                    <Table.SelectCell
-                      aria-label={fill(m.select, { name: row.original.name })}
-                      checked={row.getIsSelected()}
-                      onToggleSelected={row.toggleSelected}
-                    />
-                  ) : null}
-                  <Table.Cell>
-                    <div {...stylex.props(styles.metadata)}>
-                      <Text xstyle={styles.name}>{row.original.name}</Text>
-                      <Text
-                        size='xs'
-                        color='foreground-secondary'
-                      >
-                        {truncateWithEndVisible(row.original.id, 10, 4)} ·{' '}
-                        <Text
-                          render={<span />}
-                          size='xs'
-                          color={row.original.expiresAtLabel === null ? 'foreground-secondary' : 'warning'}
-                        >
-                          {row.original.expiresAtLabel === null
-                            ? m.neverExpires
-                            : fill(m.expires, {
-                                expiresDate: row.original.expiresAtLabel,
-                              })}
-                        </Text>
-                      </Text>
-                    </div>
-                  </Table.Cell>
-                  <Table.Cell noWrap>
-                    <Text>{row.original.createdAtLabel}</Text>
-                  </Table.Cell>
-                  <Table.Cell noWrap>
-                    <Text>{row.original.lastUsedAtLabel ?? m.neverUsed}</Text>
-                  </Table.Cell>
-                  {onRevoke ? (
-                    <Table.Cell align='end'>
-                      <APIKeyActions
-                        messages={m}
-                        apiKey={row.original}
-                        registerTrigger={removalFocus.registerTrigger}
-                        onSelect={apiKey => revokeKey.open(apiKey)}
-                      />
-                    </Table.Cell>
-                  ) : null}
-                </Table.Row>
-              ))
+              table.rows.map(row => renderRow(row.original, row))
             )}
           </Table.Body>
         </Table.Root>
-        {table.getPageCount() > 1 || (totalCount > 0 && onPageSizeChange) ? (
+        {!skeleton && (table.getPageCount() > 1 || (totalCount > 0 && onPageSizeChange)) ? (
           <Pagination
             page={table.pagination.pageIndex + 1}
             pageSize={table.pagination.pageSize}
@@ -257,8 +318,8 @@ export function APIKeysTableView({
           />
         ) : null}
       </div>
-      {createDialog ? <CreateAPIKeyDialog {...createDialog} /> : null}
-      {onRevoke ? (
+      {createDialog && !skeleton ? <CreateAPIKeyDialog {...createDialog} /> : null}
+      {onRevoke && !skeleton ? (
         <Destructive
           handle={revokeKey}
           title={apiKey => fill(m.revokeTitle, { name: apiKey.name })}
@@ -281,6 +342,17 @@ export function APIKeysTableView({
   );
 }
 
+function Bone({ line = false, xstyle }: { line?: boolean; xstyle: stylex.StyleXStyles }) {
+  const wave = useSkeletonWave<HTMLSpanElement>(true);
+
+  return (
+    <span
+      ref={wave}
+      {...stylex.props(skeletonStyles.bone, skeletonStyles.wave, line && skeletonStyles.line, xstyle)}
+    />
+  );
+}
+
 function APIKeyActions({
   messages: m,
   apiKey,
diff --git a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.skeleton.tsx b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.skeleton.tsx
new file mode 100644
index 00000000000..9e820719089
--- /dev/null
+++ b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.skeleton.tsx
@@ -0,0 +1,12 @@
+import { Panel } from '../../components/panel';
+import { themeProps } from '../../props';
+import { APIKeysTableSkeleton } from '../api-keys/api-keys-table.skeleton';
+
+export function UserProfileApiKeysPanelSkeleton() {
+  return (
+    <Panel.Root render={<div {...themeProps('user-profile-api-keys-panel', { skeleton: true })} />}>
+      <Panel.Title skeleton />
+      <APIKeysTableSkeleton />
+    </Panel.Root>
+  );
+}
diff --git a/packages/swingset/src/stories/fixtures/api-keys-table.tsx b/packages/swingset/src/stories/fixtures/api-keys-table.tsx
index 4d13749693c..248433e29a4 100644
--- a/packages/swingset/src/stories/fixtures/api-keys-table.tsx
+++ b/packages/swingset/src/stories/fixtures/api-keys-table.tsx
@@ -79,10 +79,12 @@ export function useAPIKeysTableFixture({
   initialKeys = exampleAPIKeys,
   enableSorting = false,
   subjectKind = 'user',
+  fetchDelay = 0,
 }: {
   initialKeys?: FixtureAPIKey[];
   enableSorting?: boolean;
   subjectKind?: APIKeysTableSubjectKind;
+  fetchDelay?: number;
 } = {}): APIKeysTableViewProps {
   const locale = useLocale();
   const messages = resolveAPIKeysTableMessages(useMessages('apiKeysTable'), subjectKind);
@@ -134,8 +136,23 @@ export function useAPIKeysTableFixture({
     return () => clearTimeout(timer);
   }, [searchValue, query]);
 
+  const requested = { page, query, sort, pageSize };
+  const [settled, setSettled] = useState(requested);
+  const isFetching =
+    fetchDelay > 0 &&
+    (settled.page !== page || settled.query !== query || settled.sort !== sort || settled.pageSize !== pageSize);
+  useEffect(() => {
+    if (!isFetching) {
+      return;
+    }
+    const timer = setTimeout(() => setSettled({ page, query, sort, pageSize }), fetchDelay);
+    return () => clearTimeout(timer);
+  }, [isFetching, page, query, sort, pageSize, fetchDelay]);
+  const shown = fetchDelay > 0 ? settled : requested;
+
   const filtered = items.filter(item => item.name.toLowerCase().includes(query.toLowerCase()));
-  const sorted = sortAPIKeys(filtered, sort);
+  const shownFiltered = items.filter(item => item.name.toLowerCase().includes(shown.query.toLowerCase()));
+  const sorted = sortAPIKeys(shownFiltered, shown.sort);
   const pageCount = Math.ceil(filtered.length / pageSize);
   useEffect(() => {
     if (page > Math.max(1, pageCount)) {
@@ -145,7 +162,7 @@ export function useAPIKeysTableFixture({
 
   return {
     messages,
-    apiKeys: sorted.slice((page - 1) * pageSize, page * pageSize).map(item => ({
+    apiKeys: sorted.slice((shown.page - 1) * shown.pageSize, shown.page * shown.pageSize).map(item => ({
       id: item.id,
       name: item.name,
       createdAtLabel: dateLabel(item.createdAt),
@@ -155,11 +172,12 @@ export function useAPIKeysTableFixture({
           ? null
           : relativeTime.format(Math.round((item.lastUsedAt - exampleTime) / 60_000), 'minute'),
     })),
-    totalCount: filtered.length,
+    totalCount: shownFiltered.length,
     page,
     pageSize,
     searchValue,
     isLoading: false,
+    isFetching,
     onCreate: create.onOpen,
     createDialog: create.dialog,
     onSearchChange: setSearchValue,
diff --git a/packages/swingset/src/stories/table.mdx b/packages/swingset/src/stories/table.mdx
index 38dbdae184c..2d016f1b549 100644
--- a/packages/swingset/src/stories/table.mdx
+++ b/packages/swingset/src/stories/table.mdx
@@ -57,26 +57,27 @@ import { Table } from '@clerk/mosaic/components/table';
 - `Table.HeaderCell` renders a `<th scope="col">`. Pass `onSort` to make it sortable: the label becomes a button with a direction icon, and `sort` (`'ascending'`, `'descending'`, or `'none'`) reflects the current direction as `aria-sort`. `align` moves the content to `'center'` or `'end'`.
 - `Table.Cell` renders a `<td>` with the same `align` prop. `noWrap` defaults to `false`; enable it to keep dates and other short values on one line.
 - `Table.SelectAllCell` and `Table.SelectCell` render a narrow header or body cell holding a [Checkbox](/components/checkbox). They take Checkbox props, so pass `checked`, `indeterminate`, and an `aria-label`. `Table.SelectCell` also takes `onToggleSelected`, called with `{ range: true }` when the checkbox was shift-clicked, which fits the row's `toggleSelected` from `useDataTable` directly.
+- `Table.Root` and `Table.Body` take `skeleton` for a loading state. Every `Table.HeaderCell` and `Table.Cell` inside inherits it and renders a placeholder line in place of its children; pass `skeleton={false}` to opt a cell out, or `skeleton` to make one cell a placeholder on its own. A skeleton `Table.Root` or `Table.Body` is inert and hidden from assistive technology, so pair it with a visually hidden status message. A skeleton `Table.Body` leaves the header as it is, for a table loading another page. Placeholders pulse in the same wave as the [Section](/components/section) skeletons.
 - `Table.Empty` renders a full-width row with a single cell that spans every column. Put an [EmptyState](/components/empty-state) inside it. The cell uses the largest `colSpan` browsers allow, which stretches across the columns the table actually has; pass `colSpan` yourself if you need the exact count.
 
 ## Styling
 
 Each part carries a stable `.cl-*` class, and the parts with state reflect it as `data-*` attributes:
 
-| Class                   | Part                                      | Attributes                                                                                                                |
-| ----------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `.cl-table-shell`       | The bordered wrapper around the table     |                                                                                                                           |
-| `.cl-table-viewport`    | The horizontally scrolling viewport       |                                                                                                                           |
-| `.cl-table`             | `Table.Root`                              |                                                                                                                           |
-| `.cl-table-toolbar`     | `Table.Toolbar`                           |                                                                                                                           |
-| `.cl-table-search`      | `Table.Search` input group                |                                                                                                                           |
-| `.cl-table-header`      | `Table.Header`                            |                                                                                                                           |
-| `.cl-table-body`        | `Table.Body`                              |                                                                                                                           |
-| `.cl-table-row`         | `Table.Row`                               | `data-selected` when `selected`                                                                                           |
-| `.cl-table-header-cell` | `Table.HeaderCell`                        | `data-align` (`start` / `center` / `end`), `data-sortable` when `onSort` is set, `data-sort` (`ascending` / `descending`) |
-| `.cl-table-cell`        | `Table.Cell`                              | `data-align` (`start` / `center` / `end`), `data-no-wrap` when `noWrap`                                                   |
-| `.cl-table-select-cell` | `Table.SelectAllCell`, `Table.SelectCell` |                                                                                                                           |
-| `.cl-table-empty`       | `Table.Empty`                             |                                                                                                                           |
+| Class                   | Part                                      | Attributes                                                                                                                                                 |
+| ----------------------- | ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.cl-table-shell`       | The bordered wrapper around the table     | `data-skeleton` when `skeleton`                                                                                                                            |
+| `.cl-table-viewport`    | The horizontally scrolling viewport       |                                                                                                                                                            |
+| `.cl-table`             | `Table.Root`                              |                                                                                                                                                            |
+| `.cl-table-toolbar`     | `Table.Toolbar`                           |                                                                                                                                                            |
+| `.cl-table-search`      | `Table.Search` input group                |                                                                                                                                                            |
+| `.cl-table-header`      | `Table.Header`                            |                                                                                                                                                            |
+| `.cl-table-body`        | `Table.Body`                              | `data-skeleton` when `skeleton`                                                                                                                            |
+| `.cl-table-row`         | `Table.Row`                               | `data-selected` when `selected`                                                                                                                            |
+| `.cl-table-header-cell` | `Table.HeaderCell`                        | `data-align` (`start` / `center` / `end`), `data-sortable` when `onSort` is set, `data-sort` (`ascending` / `descending`), `data-skeleton` when `skeleton` |
+| `.cl-table-cell`        | `Table.Cell`                              | `data-align` (`start` / `center` / `end`), `data-no-wrap` when `noWrap`, `data-skeleton` when `skeleton`                                                   |
+| `.cl-table-select-cell` | `Table.SelectAllCell`, `Table.SelectCell` |                                                                                                                                                            |
+| `.cl-table-empty`       | `Table.Empty`                             |                                                                                                                                                            |
 
 ```css
 .cl-table-row[data-selected] {
diff --git a/packages/swingset/src/stories/user-profile-api-keys-panel.mdx b/packages/swingset/src/stories/user-profile-api-keys-panel.mdx
index 54fd6002b8d..64dcf5c1286 100644
--- a/packages/swingset/src/stories/user-profile-api-keys-panel.mdx
+++ b/packages/swingset/src/stories/user-profile-api-keys-panel.mdx
@@ -20,3 +20,15 @@ The API keys panel lists the keys that belong to the signed-in user under the pa
 ### Empty
 
 <Story name='Empty' storyModule={Stories} />
+
+### Loading
+
+`UserProfileApiKeysPanelSkeleton` renders the panel's first load: the panel title and `APIKeysTableSkeleton`, which is `APIKeysTableView` with `skeleton` and three placeholder keys. When to show it, and for how long, is up to the caller.
+
+<Story name='Loading' storyModule={Stories} />
+
+### Page change
+
+With `refetchSkeleton`, the table turns its rows into placeholders while `isFetching` is set, and keeps its headers and controls. After a page change or a sort it shows exactly as many rows as the next page holds; after a search it shows three. This example takes 2s to fetch a page; go to page 2.
+
+<Story name='PageChange' storyModule={Stories} />
diff --git a/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx b/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx
index c204e83adcc..9639efa8396 100644
--- a/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx
+++ b/packages/swingset/src/stories/user-profile-api-keys-panel.stories.tsx
@@ -1,9 +1,25 @@
+import { Button } from '@clerk/mosaic/components/button';
+import { UserProfileApiKeysPanelSkeleton } from '@clerk/mosaic/features/user-profile/user-profile-api-keys-panel.skeleton';
+import { space } from '@clerk/mosaic/tokens.stylex';
+import * as stylex from '@stylexjs/stylex';
+import { useEffect, useState } from 'react';
+
 import type { StoryMeta } from '@/lib/types';
 
 import { APIKeysPanelExample, useAPIKeysTableFixture } from './fixtures/api-keys-table';
 
 export { default as __source } from './user-profile-api-keys-panel.stories?raw';
 
+const styles = stylex.create({
+  loadingStack: {
+    alignItems: 'flex-start',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: space['4'],
+    width: '100%',
+  },
+});
+
 export const meta: StoryMeta = {
   group: 'User Profile',
   status: 'wip',
@@ -22,3 +38,41 @@ export function Empty() {
   const props = useAPIKeysTableFixture({ initialKeys: [] });
   return <APIKeysPanelExample {...props} />;
 }
+
+export function Loading() {
+  const props = useAPIKeysTableFixture();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!loading) {
+      return;
+    }
+    const timer = setTimeout(() => setLoading(false), 2000);
+    return () => clearTimeout(timer);
+  }, [loading]);
+
+  return (
+    <div {...stylex.props(styles.loadingStack)}>
+      <Button
+        color='neutral'
+        size='sm'
+        variant='outline'
+        disabled={loading}
+        onClick={() => setLoading(true)}
+      >
+        Reload
+      </Button>
+      {loading ? <UserProfileApiKeysPanelSkeleton /> : <APIKeysPanelExample {...props} />}
+    </div>
+  );
+}
+
+export function PageChange() {
+  const props = useAPIKeysTableFixture({ fetchDelay: 2000 });
+  return (
+    <APIKeysPanelExample
+      {...props}
+      refetchSkeleton
+    />
+  );
+}