@bongos/core 1.24.25 → 1.24.26

package/modules/hall-ui/public/ai-studio.html

@@ -73,7 +73,7 @@
         <!-- The view, painted by ai-studio.js. The page's one <h1> is each
              view's own question or figure. -->
         <div class="ais-page" id="ais-page">
-          <p class="ais-quiet">Opening…</p>
+          <p class="hall-loading hall-loading--page" role="status">Opening…</p>
         </div>
         <input type="file" id="ais-file" class="ais-file" multiple accept="image/png,image/jpeg,image/gif,image/webp,application/pdf" tabindex="-1" aria-hidden="true">
         <input type="file" id="ais-camera-file" class="ais-file" accept="image/*" capture="environment" tabindex="-1" aria-hidden="true">

package/modules/hall-ui/public/blockers.html

@@ -44,7 +44,7 @@
           <h2 id="blockers-h" class="scroll__h">Requires project owner fix<span class="count-pill" id="blockers-count" hidden></span></h2>
           <div id="blockers-file-area"></div>
           <div id="blockers-body">
-            <p class="profile__placeholder">Loading…</p>
+            <p class="hall-loading hall-loading--page" role="status">Loading…</p>
           </div>
         </section>
       </main>

package/modules/hall-ui/public/blockers.js

@@ -297,7 +297,9 @@
   }
 
   function mountShell() {
-    body.innerHTML = '<ul class="ov-rows" id="blockers-list"></ul>' + kit.pagerBarHtml(pager.prefix, { label: 'blockers' });
+    // The loader holds the list until renderList's first paint replaces it (task 1005043).
+    body.innerHTML = '<ul class="ov-rows" id="blockers-list"><li class="hall-loading hall-loading--page" role="status">Loading…</li></ul>'
+      + kit.pagerBarHtml(pager.prefix, { label: 'blockers' });
     kit.wirePager(pager, function () { fetchPage(); });
   }
 

package/modules/hall-ui/public/board-room.html

@@ -32,6 +32,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <!-- task 1003469: the sealed state is a panel with a heading, not a bare
              line on the ground. board-room.js writes the floor into the lede from
              the pack's rank label, so the copy cannot drift. Unlike its

package/modules/hall-ui/public/collab.html

@@ -49,7 +49,7 @@
               <span class="cb-block__age" id="cb-for-me-age" hidden></span>
               <span class="cb-faces" id="cb-for-me-faces" aria-hidden="true"></span>
             </div>
-            <ul class="ov-rows" id="cb-for-me"></ul>
+            <ul class="ov-rows" id="cb-for-me"><li class="hall-loading" role="status">Loading…</li></ul>
             <div class="empty-state cb-empty" id="cb-for-me-empty" hidden>
               <p>Nobody is waiting on you. Requests reach you by role —
               <a href="/builders/settings">set yours in Settings</a>.</p>
@@ -79,7 +79,7 @@
               <h2 class="scroll__h" id="cb-mine-h">Your asks <span class="cb-block__n" id="cb-mine-n"></span></h2>
               <span class="cb-block__age" id="cb-mine-age" hidden></span>
             </div>
-            <ul class="ov-rows" id="cb-mine"></ul>
+            <ul class="ov-rows" id="cb-mine"><li class="hall-loading" role="status">Loading…</li></ul>
             <div class="empty-state cb-empty" id="cb-mine-empty" hidden><p>You have no open asks.</p></div>
             <button class="btn-ghost cb-more" id="cb-mine-more" type="button" aria-expanded="false" aria-controls="cb-mine" hidden></button>
           </section>
@@ -91,7 +91,7 @@
               <span class="cb-block__age" id="cb-all-age" hidden></span>
             <span class="cb-faces" id="cb-all-faces" aria-hidden="true"></span>
           </div>
-          <ul class="ov-rows" id="cb-all"></ul>
+          <ul class="ov-rows" id="cb-all"><li class="hall-loading" role="status">Loading…</li></ul>
           <div class="empty-state cb-empty" id="cb-all-empty" hidden><p>Nobody has an open ask right now.</p></div>
           <button class="btn-ghost cb-more" id="cb-all-more" type="button" aria-expanded="false" aria-controls="cb-all" hidden></button>
         </section>

package/modules/hall-ui/public/collab.js

@@ -843,5 +843,9 @@
     const sub = $('#cb-sub');
     // V6: a message that stops someone points at the next move in the same breath.
     if (sub) sub.textContent = 'Could not load requests — reload to try again.';
+    // task 1005043: the loaders stop, and the same words stand where the asks would have.
+    ['for-me', 'mine', 'all'].forEach((k) => { const host = $(`#cb-${k}`); if (host) host.innerHTML = ''; });
+    const first = $('#cb-for-me');
+    if (first) first.innerHTML = '<li class="empty-state"><p>Could not load requests — reload to try again.</p></li>';
   });
 })();

package/modules/hall-ui/public/commands.html

@@ -33,14 +33,14 @@
             <span><span class="fact-pill fact-pill--info">Shown to Claude</span> Claude can start it when you ask in plain words.</span>
             <span><span class="fact-pill cmd-how--typed">Type it yourself</span> Kept out of Claude's menu to save room; type <code>/name</code> to run it.</span>
           </div>
-          <div id="skills-body" aria-live="polite"><p class="cmd-error">Loading the slash commands…</p></div>
+          <div id="skills-body" aria-live="polite"><p class="hall-loading" role="status">Loading the slash commands…</p></div>
           <p class="cmd-note">Some commands refuse below a certain rank.</p>
         </section>
 
         <section class="scroll" id="cli-scroll" aria-labelledby="cli-h">
           <h2 id="cli-h" class="scroll__h">Terminal commands (bongos)</h2>
           <p class="scroll__lede">The same work from any terminal. <code>bongos help</code> lists them there.</p>
-          <div id="cli-body" aria-live="polite"><p class="cmd-error">Loading the terminal commands…</p></div>
+          <div id="cli-body" aria-live="polite"><p class="hall-loading" role="status">Loading the terminal commands…</p></div>
         </section>
       </main>
 

package/modules/hall-ui/public/copy-desk.html

@@ -46,7 +46,7 @@
           <h2 id="cd-flags-h" class="scroll__h">Flagged</h2>
           <p class="scroll__lede">Copy someone has judged as needing attention, with their reason. Anyone can file one; closing it needs the <span id="cd-close-rank">Metic</span> rank or above, or that it is your own.</p>
           <div id="cd-filters"></div>
-          <div id="cd-flags"><div class="empty-state"><p>Loading…</p></div></div>
+          <div id="cd-flags"><div class="empty-state"><p class="hall-loading" role="status">Loading…</p></div></div>
         </section>
 
         <!-- The one signal a machine can compute with no judgement layer at all
@@ -55,7 +55,7 @@
         <section class="scroll" id="cd-dupes-scroll" aria-labelledby="cd-dupes-h">
           <h2 id="cd-dupes-h" class="scroll__h">Said more than once</h2>
           <p class="scroll__lede">The same sentence, in several places. Sometimes that is right and the answer is to dismiss it; sometimes it is seven copies of an error message that should have been one. Nobody has looked at the ones marked untouched.</p>
-          <div id="cd-dupes"><div class="empty-state"><p>Loading…</p></div></div>
+          <div id="cd-dupes"><div class="empty-state"><p class="hall-loading" role="status">Loading…</p></div></div>
         </section>
 
         <!-- Find any string in the product and flag it. Without this the queue

package/modules/hall-ui/public/criterion-uat-ui.js

@@ -195,7 +195,7 @@
       if (existing) { existing.remove(); btn.setAttribute('aria-expanded', 'false'); return; }
       const panel = document.createElement('div');
       panel.className = 'uat-panel';
-      panel.textContent = 'Loading…';
+      panel.innerHTML = '<p class="hall-loading hall-loading--inline" role="status">Loading…</p>';
       row.appendChild(panel);
       btn.setAttribute('aria-expanded', 'true');
       try {

package/modules/hall-ui/public/deploy.html

@@ -28,6 +28,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <section class="scroll" id="dp-sealed" aria-labelledby="dp-sealed-h" hidden>
           <h2 class="scroll__h" id="dp-sealed-h">Restricted</h2>
           <p class="scroll__lede" id="dp-sealed-body">This page opens at a higher rank.</p>

package/modules/hall-ui/public/drachmae.html

@@ -51,7 +51,7 @@
             <nav class="primer-toc__inner">
               <p class="primer-toc__heading" id="primer-toc-heading">On this page</p>
               <ol class="primer-toc__list" id="primer-toc-list" aria-labelledby="primer-toc-heading">
-                <li class="primer-toc__placeholder">Loading…</li>
+                <li class="hall-loading hall-loading--inline" role="status">Loading…</li>
               </ol>
             </nav>
           </aside>

package/modules/hall-ui/public/fleet.html

@@ -27,6 +27,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <section class="scroll" id="fl-sealed" aria-labelledby="fl-sealed-h" hidden>
           <h2 class="scroll__h" id="fl-sealed-h">Restricted</h2>
           <p class="scroll__lede">This page opens at a higher rank.</p>

package/modules/hall-ui/public/gate.html

@@ -27,6 +27,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <!-- task 1003469: the sealed state is a panel with a heading, not a bare
              line on the ground. gate.js writes the real floor into the lede from
              the pack's rank label, so the copy cannot drift from ADR 0157. -->

package/modules/hall-ui/public/goals-page.js

@@ -741,7 +741,7 @@
     // the goal's tasks load, and reset the To-do count + hide the bulk toolbar.
     const todoList = $('#goal-todo-list');
     const doneBody = document.querySelector('#goal-done tbody');
-    if (todoList) todoList.innerHTML = '<div class="profile__placeholder">…</div>';
+    if (todoList) todoList.innerHTML = '<div class="hall-loading" role="status">Loading…</div>';
     if (doneBody) doneBody.innerHTML = skeletonRows(3, 5);
     const todoCount = $('#goal-todo-count');
     if (todoCount) todoCount.textContent = '';

package/modules/hall-ui/public/goals.css

@@ -407,9 +407,10 @@
 .gr-pills--muted .gr-pill { color: var(--ink-faint); }
 .gr-pills--muted .gr-pill__mark { stroke: var(--ink-faint); }
 
-/* Boot skeleton: row-shaped, in the skeleton tone (--bg-deep is black in dark). */
+/* Boot skeleton: row-shaped, in the skeleton tone (--bg-deep is black in dark).
+   The ring breathes with the bars, in the hall loader's beat (task 1005043). */
 .gr-row--skel { pointer-events: none; }
-.gr-skel__ring { display: block; width: var(--ring); height: var(--ring); border-radius: 50%; background: var(--skeleton); }
+.gr-skel__ring { display: block; width: var(--ring); height: var(--ring); border-radius: 50%; background: var(--skeleton); animation: hall-loading-breathe .8s ease-in-out infinite alternate-reverse; }
 .gr-row--skel .kit-skel { display: block; width: 60%; }
 .gr-row--skel .kit-skel + .kit-skel { width: 40%; margin-top: 10px; }
 

package/modules/hall-ui/public/goals.html

@@ -156,7 +156,7 @@
               <div id="goal-work-filters"></div>
               <p class="claim-count-line" id="goal-todo-count" aria-live="polite"></p>
               <div class="task-list" id="goal-todo-list">
-                <div class="profile__placeholder">…</div>
+                <div class="hall-loading" role="status">Loading…</div>
               </div>
               <div id="goal-todo-pager-mount"></div>
             </div>
@@ -167,7 +167,7 @@
                 <th class="ledger__sortable" id="goal-done-sort-credits" role="button" tabindex="0" aria-sort="none" data-currency-label="caps">Credits</th>
                 <th class="ledger__sortable" id="goal-done-sort-shipped" role="button" tabindex="0" aria-sort="none">Shipped</th>
               </tr></thead>
-              <tbody><tr><td colspan="5" class="ledger__empty">…</td></tr></tbody></table>
+              <tbody><tr><td colspan="5" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody></table>
               <div id="goal-done-pager-mount"></div>
             </div>
           </div>

package/modules/hall-ui/public/goals.js

@@ -107,7 +107,7 @@
 
   const SKELETON =
     '<h2 id="goals-h" class="scroll__h">Goals</h2>' +
-    '<div id="goals-body"><div class="profile__placeholder">Loading your goals…</div></div>';
+    '<div id="goals-body"><div class="hall-loading" role="status">Loading your goals…</div></div>';
 
   async function load() {
     if (!host) return;

package/modules/hall-ui/public/government.html

@@ -27,6 +27,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <!-- task 1003469: the sealed state is a panel with a heading, not a bare
              line on the ground. government.js writes the real floor into the
              lede from the pack's rank label, so the copy cannot drift. -->

package/modules/hall-ui/public/hall-widgets.js

@@ -51,14 +51,14 @@
   w('welcome-scroll', 'Welcome', 0,
     '<button type="button" class="welcome__minimize" id="welcome-minimize" aria-label="Minimize the welcome panel" title="Minimize">−</button>' +
     '<h2 id="welcome-h" class="scroll__h">Welcome</h2>' +
-    '<div class="welcome" id="welcome-body"><div class="profile__placeholder">…</div></div>',
+    '<div class="welcome" id="welcome-body"><div class="hall-loading" role="status">Loading…</div></div>',
     { view: 'home', zone: 'home-banner', welcomeChip: true, sectionClass: 'scroll scroll--welcome', labelledby: 'welcome-h', hiddenByDefault: true });
 
   // 0b. Onboarding checklist — V3.R75 (#294).
   w('onboarding-scroll', 'Getting started', 10,
     '<h2 id="onboarding-h" class="scroll__h">Getting started</h2>' +
     '<p class="scroll__lede">A short path to finding your feet. Tick the steps you’ve done; the rest are tracked for you.</p>' +
-    '<ol class="onboarding-list" id="onboarding-list"><li class="onboarding-item onboarding-item--placeholder">…</li></ol>' +
+    '<ol class="onboarding-list" id="onboarding-list"><li class="hall-loading" role="status">Loading…</li></ol>' +
     '<p class="ledger__note" id="onboarding-status" hidden></p>',
     { view: 'home', zone: 'home-banner', labelledby: 'onboarding-h', hiddenByDefault: true });
 
@@ -114,7 +114,7 @@
     '<div class="home-split__col">' +
     '<h3 class="ginbox__sec-h" id="home-recent-subh" hidden>Recently shipped</h3>' +
     '<table class="ledger" id="home-recent-table"><thead><tr><th>№</th><th>Work</th><th data-currency-label="caps">Credits</th><th>Shipped</th></tr></thead>' +
-    '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>' +
+    '<tbody><tr><td colspan="4" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody></table>' +
     '<p class="card-foot"><a href="#accomplishments-work">All your work →</a></p>' +
     '</div>' +
     '</div>',
@@ -157,7 +157,7 @@
   // the band sits above the rail sections and is never a rail entry.
   w('profile-scroll', 'Profile', 20,
     '<h2 id="profile-h" class="sr-only">Profile</h2>' +
-    '<div class="profile" id="profile-body"><div class="profile__placeholder">…</div></div>',
+    '<div class="profile" id="profile-body"><div class="hall-loading" role="status">Loading…</div></div>',
     { view: 'standing', sectionClass: 'scroll scroll--profile', labelledby: 'profile-h' });
 
   /* -- Work — "what have I shipped, and how was it judged" -- */
@@ -179,7 +179,7 @@
       '<span id="ships-count" aria-live="polite" class="filter__count"></span>' +
     '</div>' +
     '<table class="ledger" id="recent-ships"><thead><tr><th>№</th><th>Work</th><th data-currency-label="caps">Credits</th><th>Shipped</th></tr></thead>' +
-    '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>' +
+    '<tbody><tr><td colspan="4" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody></table>' +
     // task 2174: the hand-rolled prev/next bar gives way to the OTBKit pager
     // (per-page select, page indicator, clamping) — same #ships-* id prefix.
     window.OTBKit.pagerBarHtml('ships', { label: 'shipped work' }),
@@ -190,7 +190,7 @@
     '<h2 id="marks-h" class="scroll__h">Reviews</h2>' +
     '<div class="profile__placeholder" id="marks-empty" style="display:none;">No work reviewed yet.</div>' +
     '<table class="ledger" id="recent-grades"><thead><tr><th>№</th><th>Work</th><th>Score</th><th>Verdict</th><th>Reviewed</th></tr></thead>' +
-    '<tbody><tr><td colspan="5" class="ledger__empty">…</td></tr></tbody></table>' +
+    '<tbody><tr><td colspan="5" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody></table>' +
     '<p class="ledger__note" id="grades-rolling-note" hidden></p>',
     { view: 'standing', group: 'work', labelledby: 'marks-h' });
 
@@ -201,7 +201,7 @@
     '<h2 id="karma-h" class="scroll__h">Karma</h2>' +
     '<p class="scroll__lede">Ideas passed, peer votes and approvals earn karma. Shipped work earns ' + curLabel() + '.</p>' +
     '<table class="ledger" id="karma-feed"><thead><tr><th>When</th><th>Delta</th><th>Reason</th><th>Granted by</th></tr></thead>' +
-    '<tbody><tr><td colspan="4" class="ledger__empty">…</td></tr></tbody></table>',
+    '<tbody><tr><td colspan="4" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody></table>',
     { view: 'standing', group: 'karma', labelledby: 'karma-h', hiddenByDefault: true });
 
   // 4b. Peer acclaim — V3.R25 (#245). Hidden until data.
@@ -209,7 +209,7 @@
     '<h2 id="acclaim-h" class="scroll__h">Peer recognition</h2>' +
     '<p class="scroll__lede">Vote on others’ finished work. A vote counts toward their karma after a week.</p>' +
     '<table class="ledger" id="acclaim-feed"><thead><tr><th>Work</th><th>By</th><th>Votes</th></tr></thead>' +
-    '<tbody><tr><td colspan="3" class="ledger__empty">…</td></tr></tbody></table>' +
+    '<tbody><tr><td colspan="3" class="ledger__empty"><span class="hall-loading" role="status">Loading…</span></td></tr></tbody></table>' +
     // task 1002446: the last unpaged list in the hall. The feed is already
     // client-side, so the kit's pager fits without touching the endpoint.
     window.OTBKit.pagerBarHtml('acclaim', { label: 'entries' }),
@@ -236,7 +236,7 @@
   w('honours-scroll', 'Achievements', 60,
     '<h2 id="ach-h" class="scroll__h">Achievements</h2>' +
     '<p class="scroll__lede">Earned ones are lit; the rest show what is left.</p>' +
-    '<div class="ach-grid" id="ach-grid"><div class="profile__placeholder">…</div></div>',
+    '<div class="ach-grid" id="ach-grid"><div class="hall-loading" role="status">Loading…</div></div>',
     { view: 'standing', group: 'achievements', labelledby: 'ach-h' });
 
   // task 1003441: the Leaderboard widget is GONE from this page. It is a real

package/modules/hall-ui/public/ideas.html

@@ -129,7 +129,7 @@
             Anyone can develop one — the author keeps the credit for having had it,
             and you are recorded as its developer.
           </p>
-          <div id="fi-queue"><p class="fi-note">Loading…</p></div>
+          <div id="fi-queue"><p class="hall-loading" role="status">Loading…</p></div>
         </section>
 
         <!-- The composer. The idea detail view lives on its own page (R153).
@@ -180,7 +180,7 @@
                  one step earlier, and it would silently ignore a per-project
                  template (R156). -->
             <div id="fi-fields" class="fi-fields">
-              <p class="fi-note">Loading the five questions…</p>
+              <p class="hall-loading" role="status">Loading the five questions…</p>
             </div>
 
             <!-- The scope recommendation (BV2.R13). Rendered from the same

package/modules/hall-ui/public/index.html

@@ -69,6 +69,8 @@
            .view/.view-zone wrappers are shell layout only. -->
       <main class="app-views" id="hall-main">
         <section class="view" id="view-home" data-view-title="Home">
+          <!-- task 1005043: Home's loader, shown until a card mounts into a zone. -->
+          <p class="hall-loading hall-loading--page hall-loading--zones" role="status">Loading…</p>
           <div class="view-zone" id="zone-home-banner">
             <!-- Landing card for signed-out visitors (builders.js renderLanding)
                  + the re-open affordance for a dismissed welcome banner. -->

package/modules/hall-ui/public/lightbulb.js

@@ -83,7 +83,7 @@
         '<button class="pn__submit" type="button" data-lb-submit>Turn into ideas</button>' +
       '</div>' +
       '<section class="pn__list" aria-labelledby="lb-list-h"><h3 class="pn__list-h" id="lb-list-h">Ideas from this page</h3>' +
-        '<div id="lb-list"><p class="pn__quiet">Loading…</p></div>' +
+        '<div id="lb-list"><p class="hall-loading" role="status">Loading…</p></div>' +
       '</section>';
   }
   function listHtml(ideas) {

package/modules/hall-ui/public/market-watch-item.html

@@ -26,7 +26,7 @@
 
       <main id="hall-main">
         <a class="mw-back" href="/market-watch">‹ Market Watch</a>
-        <p class="mw-quiet" id="mw-loading">Loading the case file…</p>
+        <p class="hall-loading hall-loading--page" id="mw-loading" role="status">Loading the case file…</p>
 
         <section class="mw-panel mw-off" id="mw-off" hidden>
           <span class="mw-label">market watch</span>

package/modules/hall-ui/public/market-watch-rules.html

@@ -28,7 +28,7 @@
       <main id="hall-main" class="mwr">
         <div id="mwr-slider"></div>
         <div class="mwr-pipe" id="mwr-pipe" aria-label="the watch, step by step"></div>
-        <section class="mwr-panel" id="mwr-panel" aria-live="polite"><p class="mwr-empty">Loading the watch rules…</p></section>
+        <section class="mwr-panel" id="mwr-panel" aria-live="polite"><p class="hall-loading hall-loading--page" role="status">Loading the watch rules…</p></section>
         <h2 class="mwr-lbl">cost of one run, by step</h2>
         <div id="mwr-cost"></div>
       </main>

package/modules/hall-ui/public/market-watch-settings.html

@@ -25,6 +25,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <!-- What a reader who is not the owner sees. The routes are the wall (403); this is
              only what stands in for an empty gauge. -->
         <section class="scroll" id="mws-sealed" aria-labelledby="mws-sealed-h" hidden>

package/modules/hall-ui/public/market-watch.html

@@ -25,7 +25,7 @@
       </div>
 
       <main id="hall-main">
-        <p class="mw-quiet" id="mw-loading">Loading the watch…</p>
+        <p class="hall-loading hall-loading--page" id="mw-loading" role="status">Loading the watch…</p>
 
         <!-- Market Watch is off on this project: a quiet line, never an error. -->
         <section class="mw-panel mw-off" id="mw-off" hidden>

package/modules/hall-ui/public/modules.html

@@ -56,7 +56,7 @@
               <span class="ov-group__name">Shipped with the core</span>
               <span class="ov-group__n" id="core-n"></span>
             </div>
-            <ul class="ov-rows" id="core-grid"><li class="mod-loading">Loading the catalog…</li></ul>
+            <ul class="ov-rows" id="core-grid"><li class="hall-loading" role="status">Loading the catalog…</li></ul>
           </div>
 
           <!-- Built by this project — the pool `bongos module submit` draws from

package/modules/hall-ui/public/my-agents.html

@@ -41,13 +41,13 @@
           <section class="scroll ma-desk" id="ma-desk" aria-labelledby="ma-desk-h">
             <h2 class="scroll__h" id="ma-desk-h">Your agents</h2>
             <p class="scroll__lede" id="ma-desk-lede">One line each. Tap to change; it saves straight away.</p>
-            <div id="ma-rows" aria-live="polite"><p class="ma-quiet">Reading your settings…</p></div>
+            <div id="ma-rows" aria-live="polite"><p class="hall-loading" role="status">Reading your settings…</p></div>
           </section>
 
           <aside class="scroll ma-reads" id="ma-reads" aria-labelledby="ma-reads-h">
             <h2 class="scroll__h" id="ma-reads-h">What your agent reads first</h2>
             <p class="scroll__lede">At the start of every session, in this order.</p>
-            <div id="ma-reads-body" aria-live="polite"><p class="ma-quiet">Reading…</p></div>
+            <div id="ma-reads-body" aria-live="polite"><p class="hall-loading" role="status">Reading…</p></div>
           </aside>
         </div>
       </main>

package/modules/hall-ui/public/primer.html

@@ -52,7 +52,7 @@
             <nav class="primer-toc__inner">
               <p class="primer-toc__heading" id="primer-toc-heading">In this primer</p>
               <ol class="primer-toc__list" id="primer-toc-list" aria-labelledby="primer-toc-heading">
-                <li class="primer-toc__placeholder">Loading…</li>
+                <li class="hall-loading hall-loading--inline" role="status">Loading…</li>
               </ol>
             </nav>
           </aside>

package/modules/hall-ui/public/profile.html

@@ -52,7 +52,7 @@
             <section class="scroll" id="standing-scroll" aria-labelledby="standing-h" data-group="overview">
               <h2 id="standing-h" class="sr-only">About</h2>
               <div class="profile profile--ident" id="profile-head">
-                <div class="profile__placeholder">…</div>
+                <div class="hall-loading" role="status">Loading…</div>
               </div>
             </section>
 
@@ -63,7 +63,7 @@
             <section class="scroll" id="numbers-scroll" aria-labelledby="numbers-h" data-group="overview">
               <h2 id="numbers-h" class="scroll__h">By the numbers</h2>
               <div id="numbers-body">
-                <p class="profile__placeholder">Loading…</p>
+                <p class="hall-loading" role="status">Loading…</p>
               </div>
             </section>
 
@@ -79,7 +79,7 @@
                    first"). profile-charts.js fills it and re-draws on change. -->
               <div id="charts-controls"></div>
               <div class="pcharts" id="charts-grid">
-                <p class="pchart__note">…</p>
+                <p class="hall-loading" role="status">Loading…</p>
               </div>
             </section>
 
@@ -87,7 +87,7 @@
             <section class="scroll scroll--bare" id="ach-scroll" aria-labelledby="ach-h" data-group="overview">
               <h2 id="ach-h" class="scroll__h">Achievements</h2>
               <div class="ach-grid" id="ach-grid">
-                <div class="profile__placeholder">…</div>
+                <div class="hall-loading" role="status">Loading…</div>
               </div>
             </section>
 
@@ -120,7 +120,7 @@
                   </tr>
                 </thead>
                 <tbody>
-                  <tr><td colspan="4">…</td></tr>
+                  <tr><td colspan="4"><span class="hall-loading" role="status">Loading…</span></td></tr>
                 </tbody>
               </table>
               <div id="works-pager"></div>

package/modules/hall-ui/public/project-settings.html

@@ -27,6 +27,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <!-- The sealed state is a panel with a heading, not a bare line on the ground
              (task 1003469). The page gate is the real wall; this is what a reader who
              followed a link sees instead of an empty page. -->

package/modules/hall-ui/public/ranks.html

@@ -29,7 +29,7 @@
         <section class="scroll" id="standing-scroll" aria-labelledby="standing-h">
           <h2 id="standing-h" class="scroll__h">Where you stand</h2>
           <div class="ranks-standing" id="standing-body">
-            <div class="profile__placeholder">…</div>
+            <div class="hall-loading" role="status">Loading…</div>
           </div>
         </section>
 
@@ -49,7 +49,7 @@
           <h2 id="ladder-h" class="scroll__h">The ranks, lowest to highest</h2>
           <p class="scroll__lede">Each rank opens more of the system. Yours and the one above are shown in full; the rest open as you get closer.</p>
           <ol class="ranks-ladder" id="ladder-body">
-            <li class="rank-card rank-card--placeholder">…</li>
+            <li class="hall-loading" role="status">Loading…</li>
           </ol>
         </section>
 
@@ -57,7 +57,7 @@
         <section class="scroll" id="rise-scroll" aria-labelledby="rise-h">
           <h2 id="rise-h" class="scroll__h">How you advance</h2>
           <div class="ranks-rise" id="rise-body">
-            <div class="profile__placeholder">…</div>
+            <div class="hall-loading" role="status">Loading…</div>
           </div>
         </section>
       </main>

package/modules/hall-ui/public/roadmap.html

@@ -30,7 +30,7 @@
 
       <main id="hall-main">
         <div id="rm-root">
-          <div class="profile__placeholder">Loading the roadmap…</div>
+          <div class="hall-loading hall-loading--page" role="status">Loading the roadmap…</div>
         </div>
       </main>
 

package/modules/hall-ui/public/roster.html

@@ -39,7 +39,7 @@
           <div class="roster-roles" id="roster-roles" role="group" aria-label="Show"></div>
           <div id="roster-filters"></div>
           <div id="roster-body">
-            <div class="profile__placeholder">Loading the roster…</div>
+            <div class="hall-loading hall-loading--page" role="status">Loading the roster…</div>
           </div>
         </section>
       </main>

package/modules/hall-ui/public/sessions.html

@@ -29,6 +29,8 @@
       </div>
 
       <main id="hall-main">
+        <!-- task 1005043: the page loader, shown until any section below is revealed. -->
+        <p class="hall-loading hall-loading--page hall-loading--wait" role="status">Loading…</p>
         <!-- Access notice — shown by sessions.js when the viewer is below the
              floor. The heading and the line are written from the pack's rank
              label (ADR 0157: metic and up), so the static text never renders. -->

package/modules/hall-ui/public/settings-software-update.js

@@ -275,7 +275,7 @@
     if (asked) return;
     asked = true;
     const body = byId('su-body');
-    if (body) body.innerHTML = '<p class="panel-hint">Checking for a newer version…</p>';
+    if (body) body.innerHTML = '<p class="hall-loading hall-loading--inline" role="status">Checking for a newer version…</p>';
     try {
       const res = await api.request('GET', `${API}/software-update`);
       if (res.status === 401) { window.location.assign(`${API}/auth/web/start`); return; }

package/modules/hall-ui/public/settings-specialities.js

@@ -276,7 +276,7 @@
     return `
       <form class="speciality-offer" data-id="${escapeHtml(String(s.id))}">
         <h4 class="speciality-create__h">What ${escapeHtml(s.name)} offers</h4>
-        <div class="speciality-offer__choices">${state.offerChoices || '<p class="prow__hint">Loading this project’s skills…</p>'}</div>
+        <div class="speciality-offer__choices">${state.offerChoices || '<p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p>'}</div>
         <div class="speciality-actions">
           <button type="submit" class="btn" ${state.offerChoices ? '' : 'disabled'}>Save what it offers</button>
         </div>

package/modules/hall-ui/public/settings.html

@@ -54,6 +54,8 @@
           <nav class="section-rail" id="settings-rail" aria-label="Settings sections"></nav>
 
           <div class="settings-groups" id="settings-groups" data-active="account">
+            <!-- task 1005043: the panel loader, until settings.js has read who is viewing (hideLayout). -->
+            <p class="hall-loading hall-loading--page" id="settings-loading" role="status">Loading…</p>
 
             <!-- ============ group: account ============ -->
 
@@ -344,7 +346,7 @@
                 </label>
                 <details id="speciality-create-offer" class="speciality-offer-box">
                   <summary>Skills it offers <small>(optional)</small></summary>
-                  <div id="speciality-create-skills"><p class="prow__hint">Loading this project’s skills…</p></div>
+                  <div id="speciality-create-skills"><p class="hall-loading hall-loading--inline" role="status">Loading this project’s skills…</p></div>
                 </details>
                 <div class="speciality-actions">
                   <button type="submit" class="btn">Create speciality</button>