Add a thin boot progress bar under 'waking the city' that fills as the population loads

tejasprabhune · tejasprabhune · commit 5a77f2d8f9b5 · 2026-06-14T13:16:32.000-07:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -23,9 +23,14 @@
     <!-- top-left: title (pixel font, all black) -->
     <div id="title" class="title">sim francisco</div>
 
-    <!-- simulation status: SF · residents · date, directly below the title -->
+    <!-- simulation status: SF · residents · date (top-right) -->
     <div id="status" class="status">waking the city…</div>
 
+    <!-- boot progress: a thin line that fills while the city wakes -->
+    <div id="boot" class="boot hidden" aria-hidden="true">
+      <div class="boot-track"><div id="boot-fill" class="boot-fill"></div></div>
+    </div>
+
     <!-- return-to-overview button (visible only when zoomed in) -->
     <button id="return" class="return hidden" aria-label="Return to the whole city">
       <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
diff --git a/frontend/src/api.js b/frontend/src/api.js
@@ -44,7 +44,7 @@ export const createSimulation = (overrides = {}) =>
 // Page through every alive agent on a branch. Returns [{id, name, lonlat, values, ...}].
 // `cap` is only a runaway guard; the real bound is the branch's total_matched,
 // which we learn from the first page — so we never silently drop agents.
-export async function getAllAgents(branchId, cap = 50000) {
+export async function getAllAgents(branchId, onProgress, cap = 50000) {
   const limit = 1000;
   let offset = 0;
   const out = [];
@@ -54,6 +54,7 @@ export async function getAllAgents(branchId, cap = 50000) {
     out.push(...batch);
     const total = page.total_matched ?? out.length;
     offset += limit;
+    if (onProgress) onProgress(out.length, total);
     if (out.length >= total || batch.length < limit) break;
   }
   return out;
diff --git a/frontend/src/app.js b/frontend/src/app.js
@@ -18,6 +18,8 @@ const $ = (id) => document.getElementById(id);
 const els = {
   canvas: $("map"),
   status: $("status"),
+  boot: $("boot"),
+  bootFill: $("boot-fill"),
   returnBtn: $("return"),
   summary: $("summary"),
   summaryLabel: $("summary-label"),
@@ -61,22 +63,33 @@ function cleanupBranch() {
 }
 
 // ── boot ───────────────────────────────────────────────────────────────
+// 0 → 1 progress on the thin boot bar. createSim is one slow step (~0.2); the
+// agent fetch is paged, so it fills the rest (0.2 → 0.97) as residents arrive.
+function setBoot(p) { els.bootFill.style.width = `${Math.round(Math.max(0, Math.min(1, p)) * 100)}%`; }
+
 async function boot() {
   map.onZoomChange = (zoomedIn) => { zoomedIn ? show(els.returnBtn) : hide(els.returnBtn); };
   map.start();
   els.status.textContent = "waking the city…";
+  show(els.boot); setBoot(0.06);
   try {
     const sim = await api.createSimulation();
     state.simId = sim.simulation_id;
     state.mainBranch = sim.main_branch;
-    const agents = await api.getAllAgents(state.mainBranch);
+    setBoot(0.2);
+    const agents = await api.getAllAgents(state.mainBranch, (loaded, total) => {
+      setBoot(0.2 + 0.77 * (total ? loaded / total : 0));
+    });
     if (!agents.length) throw new Error("no agents returned");
     map.setAgents(agents);
     state.residents = agents.length;
+    setBoot(1);
+    setTimeout(() => hide(els.boot), 450);       // let the bar finish, then fade out
     setIdleStatus();
     state.phase = "idle";
   } catch (err) {
     console.error(err);
+    hide(els.boot);
     map.setAgents(fallbackAgents(SIM.n));        // never leave an empty city
     els.status.textContent = "offline preview · backend unreachable";
     toast("Couldn't reach the backend — showing an offline preview.");
diff --git a/frontend/styles.css b/frontend/styles.css
@@ -87,6 +87,24 @@ body {
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
+/* ── boot progress (thin line under the status while the city wakes) ────── */
+.boot {
+  position: absolute; top: 58px; right: 20px;
+  width: min(210px, 48vw);
+  pointer-events: none;
+}
+.boot-track {
+  height: 5px; border-radius: 999px; overflow: hidden;
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid var(--glass-edge);
+  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 6px rgba(20, 20, 20, 0.1);
+}
+.boot-fill {
+  height: 100%; width: 5%; border-radius: 999px;
+  background: linear-gradient(90deg, #3a3a3a, var(--ink));
+  transition: width .35s var(--ease);
+}
+
 /* ── return-to-overview button (top-left, below the title with breathing room) ── */
 .return {
   position: absolute; top: 82px; left: 20px;
@@ -301,6 +319,7 @@ body {
 @media (max-width: 560px) {
   .title { top: 12px; left: 12px; font-size: 19px; padding: 8px 12px 7px; border-radius: 11px; }
   .status { top: 14px; right: 12px; font-size: 11px; max-width: 52vw; padding: 6px 11px; }
+  .boot { top: 46px; right: 12px; width: min(150px, 52vw); }
   .return { top: 52px; left: 12px; font-size: 12px; padding: 6px 11px 6px 9px; }
 
   .dock { bottom: 16px; gap: 9px; max-width: 96vw; }
