diff --git a/frontend/src/__tests__/ladder.test.ts b/frontend/src/__tests__/ladder.test.ts
index 254cc86b9..b93ecfaf9 100644
--- a/frontend/src/__tests__/ladder.test.ts
+++ b/frontend/src/__tests__/ladder.test.ts
@@ -79,6 +79,41 @@ describe('ladder.ts', () => {
     ]);
   });
 
+  // Issue #186: the per-account table loads behind the shared skeleton, not a
+  // plain "Loading..." paragraph, and the skeleton gives way to the table or
+  // to the error.
+  test('per-account configs show skeleton rows while loading, then the table (issue #186)', async () => {
+    document.body.innerHTML = '<div id="commitment-laddering-settings"></div>';
+    let resolve: (c: LadderConfig[]) => void = () => undefined;
+    (api.getLadderConfigs as jest.Mock).mockReturnValue(new Promise<LadderConfig[]>((r) => { resolve = r; }));
+    const done = initLadderingSettings(false);
+
+    const container = document.getElementById('ladder-configs-table-container')!;
+    // No visible "Loading…" paragraph; the only text is the sr-only status.
+    expect(container.querySelector('p')).toBeNull();
+    const rows = container.querySelectorAll('tr.skeleton-row');
+    expect(rows).toHaveLength(3);
+    expect(rows[0]!.querySelectorAll('td')).toHaveLength(8);
+    expect(container.querySelector('.skeleton-status')).toHaveTextContent('Loading…');
+
+    resolve([baseConfig({ id: 'config-1' })]);
+    await done;
+    expect(container.querySelector('.skeleton')).toBeNull();
+    expect(container.querySelectorAll('tbody tr')).toHaveLength(1);
+  });
+
+  test('a failed per-account config load replaces the skeleton with the error (issue #186)', async () => {
+    document.body.innerHTML = '<div id="commitment-laddering-settings"></div>';
+    (api.getLadderConfigs as jest.Mock).mockRejectedValue(new Error('boom'));
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    await initLadderingSettings(false);
+
+    const container = document.getElementById('ladder-configs-table-container')!;
+    expect(container.querySelector('.skeleton')).toBeNull();
+    expect(container.hasAttribute('aria-busy')).toBe(false);
+    expect(container).toHaveTextContent('Failed to load per-account configurations.');
+  });
+
   test('config modal moves focus inside, traps Tab, closes on Escape and restores focus (#731)', async () => {
     await renderSection([baseConfig({ id: 'config-1' })]);
     const editBtn = document.querySelector<HTMLButtonElement>('.ladder-edit-btn')!;
diff --git a/frontend/src/__tests__/skeleton.test.ts b/frontend/src/__tests__/skeleton.test.ts
index c4fedf9f7..d6e287078 100644
--- a/frontend/src/__tests__/skeleton.test.ts
+++ b/frontend/src/__tests__/skeleton.test.ts
@@ -5,6 +5,8 @@
  * the DOM shape each call site expects (tile / row / box).
  */
 
+import * as fs from 'fs';
+import * as path from 'path';
 import {
   skeletonBox,
   skeletonText,
@@ -254,6 +256,21 @@ describe('consistent loading pattern + slow fallback (issue #186)', () => {
   });
 });
 
+// Issue #186: the static Settings placeholder in index.html (shown before
+// loadGlobalSettings runs) uses the same skeleton, not "Loading settings..."
+// text.
+test('index.html #settings-loading is a skeleton with a screen-reader status (issue #186)', () => {
+  const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf-8');
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const loading = doc.getElementById('settings-loading')!;
+  expect(loading.querySelectorAll('.skeleton-group .skeleton.skeleton-line')).toHaveLength(6);
+  expect(loading.querySelector('.skeleton-group')!.getAttribute('aria-hidden')).toBe('true');
+  const status = loading.querySelector('.skeleton-status.sr-only[role="status"]');
+  expect(status?.textContent).toBe('Loading…');
+  // Nothing but the screen-reader status carries text.
+  expect(loading.textContent!.trim()).toBe('Loading…');
+});
+
 // Issue #729 (UX-34): the placeholders are aria-hidden, so the container
 // carries aria-busy while one is showing, and drops it once real content
 // (or nothing) replaces it, whichever path did the replacing.
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 7e4baac72..62009b53e 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -386,7 +386,19 @@ <h2 class="sr-only page-heading" id="admin-page-heading" tabindex="-1">Admin</h2
                 <section id="settings-section" class="card page-hero" role="tabpanel" aria-labelledby="admin-subtab-general">
                     <h2>Global Configuration</h2>
                     <p class="settings-description page-hero-description">Configure CUDly settings for commitment purchases across all cloud providers.</p>
-                    <div id="settings-loading" class="loading">Loading settings...</div>
+                    <!-- Issue #186: the same skeleton loadGlobalSettings shows, so the
+                         panel never flashes plain "Loading" text before the script runs. -->
+                    <div id="settings-loading" class="loading" aria-busy="true">
+                        <span class="sr-only skeleton-status" role="status">Loading…</span>
+                        <div class="skeleton-group" aria-hidden="true">
+                            <div class="skeleton skeleton-line"></div>
+                            <div class="skeleton skeleton-line"></div>
+                            <div class="skeleton skeleton-line"></div>
+                            <div class="skeleton skeleton-line"></div>
+                            <div class="skeleton skeleton-line"></div>
+                            <div class="skeleton skeleton-line skeleton-line-short"></div>
+                        </div>
+                    </div>
                     <form id="global-settings-form" class="settings-form hidden">
                         <fieldset class="settings-category">
                             <legend>General Settings</legend>
diff --git a/frontend/src/ladder-config-table.ts b/frontend/src/ladder-config-table.ts
index 6068b3cbe..e777dd3e2 100644
--- a/frontend/src/ladder-config-table.ts
+++ b/frontend/src/ladder-config-table.ts
@@ -23,6 +23,9 @@ export function ladderAccountLabel(config: LadderConfig, accounts: readonly Acco
   return account ? `${account.name} (${account.external_id})` : config.cloud_account_id;
 }
 
+/** Column count of the table below, so its loading skeleton matches (#186). */
+export const LADDER_CONFIG_TABLE_COLUMNS = 8;
+
 export function renderLadderConfigTable(container: HTMLElement, configs: readonly LadderConfig[], options: LadderConfigTableOptions): void {
   if (configs.length === 0) {
     container.innerHTML = '<p class="settings-help">No per-account configurations yet. Click <strong>Add Account Config</strong> to create one.</p>';
diff --git a/frontend/src/ladder.ts b/frontend/src/ladder.ts
index dec6d3a6f..0c2882aef 100644
--- a/frontend/src/ladder.ts
+++ b/frontend/src/ladder.ts
@@ -20,10 +20,11 @@ import { openModal, closeModal } from './modal';
 import { canAccess } from './permissions';
 import { initLadderTimeline, refreshLadderTimeline } from './ladder-timeline';
 import { initLadderAccountSelector } from './ladder-account-selector';
-import { renderLadderConfigTable } from './ladder-config-table';
+import { LADDER_CONFIG_TABLE_COLUMNS, renderLadderConfigTable } from './ladder-config-table';
 import { renderLadderConfigModal } from './ladder-config-modal';
 import { listAccountsMinimal, type AccountSummary } from './api/accounts';
 import { readLadderNumbers } from './ladder-form-numbers';
+import { showSkeletonRows, teardownSkeleton } from './lib/skeleton';
 
 // ==========================================
 // MODULE STATE
@@ -62,6 +63,10 @@ export async function initLadderingSettings(globalEnabled: boolean): Promise<voi
   if (!container) return;
 
   container.innerHTML = renderLadderingSection(globalEnabled);
+  // Issue #186: the per-account table loads behind the shared skeleton (one
+  // row shape per table column), not a plain "Loading..." paragraph.
+  const configsContainer = document.getElementById('ladder-configs-table-container');
+  if (configsContainer) showSkeletonRows(configsContainer, 3, LADDER_CONFIG_TABLE_COLUMNS);
   selectedAccount = undefined;
   wireKillSwitchToggle();
   wireModalCloseButtons();
@@ -80,6 +85,7 @@ export async function initLadderingSettings(globalEnabled: boolean): Promise<voi
     console.error('Failed to load ladder configs:', err);
     const tableContainer = document.getElementById('ladder-configs-table-container');
     if (tableContainer) {
+      teardownSkeleton(tableContainer);
       tableContainer.innerHTML = '<p class="settings-error">Failed to load per-account configurations.</p>';
     }
   }
@@ -129,9 +135,7 @@ function renderLadderingSection(globalEnabled: boolean): string {
 
   <div id="ladder-configs-section">
     <h4>Per-Account Configurations</h4>
-    <div id="ladder-configs-table-container">
-      <p class="settings-help">Loading&hellip;</p>
-    </div>
+    <div id="ladder-configs-table-container"></div>
     ${canEdit ? `
     <button type="button" id="ladder-add-config-btn" class="btn btn-secondary">
       Add Account Config
diff --git a/frontend/src/styles/base.css b/frontend/src/styles/base.css
index bda764259..12bfd0974 100644
--- a/frontend/src/styles/base.css
+++ b/frontend/src/styles/base.css
@@ -360,6 +360,17 @@ textarea {
     gap: var(--cudly-sp-3);
 }
 
+/* Text lines for skeletons written in static HTML (issue #186), which can't
+ * size blocks the way lib/skeleton.ts does: these match skeletonText's
+ * 1rem lines with a 60% last line. */
+.skeleton-line {
+    height: 1rem;
+}
+
+.skeleton-line-short {
+    width: 60%;
+}
+
 .skeleton-tile {
     /* KPI tile shape — matches .kpi-tile's padding + min height so the
      * post-render swap doesn't trigger layout shift. */