Spaces:

SZLHOLDINGS
/

a11oy

Running

App Files Files Community

betterwithage commited on Jun 15

Commit

00f1840

verified ·

1 Parent(s): 451899c

boot-ux: add no-white-flash branded boot-guard splash to /console (pages/console.html)

Browse files

Additive inline splash painted as first <body> node so first paint is always branded chrome + honest 'initializing…', never a white void during cold factory-rebuild boot or while the first live fetch resolves. Self-clears on first view paint; honest 'reconnecting' fallback on stall; hard-cap removal; respects prefers-reduced-motion. 0 runtime CDN, no codenames, no fabricated metrics.

Files changed (1) hide show

pages/console.html +85 -0

pages/console.html CHANGED Viewed

@@ -442,6 +442,91 @@ details.raw[open] summary{color:var(--muted);}
 </style>
 </head>
 <body>
 <div class="topbar">
   <button class="menu-btn" aria-label="Toggle navigation" aria-expanded="false" onclick="toggleSide()">☰</button>
   <span>SZL HOLDINGS</span><span class="sep">/</span>

 </style>
 </head>
 <body>
+<!-- ============================================================================
+     SZL BOOT-GUARD (no-white-flash) — additive, 0-CDN, byte-identical across flagships.
+     PROBLEM: the head loads several synchronous vendored <script src> tags (THREE,
+     ECharts, globe.gl, etc.) BEFORE <body> is parsed; on a cold factory-rebuild boot
+     or a slow/ flapping egress that download window paints as a WHITE VOID, and the
+     bare <main>loading…</main> can persist if a view's first live fetch stalls.
+     FIX: paint a branded full-screen splash as the FIRST node in <body> using ONLY
+     inline styles (cannot be blocked by any external asset), so first paint is ALWAYS
+     the branded shell + an honest "initializing…" — never white. The guard self-clears
+     the instant the app's first view renders (MutationObserver on #content), and a
+     watchdog turns the copy into an honest "reconnecting" line if boot stalls past the
+     cap — NEVER a permanent spinner, NEVER a fabricated number. Respects
+     prefers-reduced-motion. Removes itself cleanly; leaves zero residue in the DOM. -->
+<div id="szl-bootguard" role="status" aria-live="polite" style="position:fixed;inset:0;z-index:2147483646;background:#0a0a0a;color:#f5f5f5;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Space Grotesk',Georgia,serif;-webkit-font-smoothing:antialiased;">
+  <div style="display:flex;align-items:center;gap:14px;">
+    <div id="szl-bg-mark" style="width:48px;height:48px;border-radius:11px;background:linear-gradient(135deg,#c9b787,#5fb3a3);color:#0a0a0a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:26px;line-height:1;box-shadow:0 0 22px rgba(95,179,163,.28);">A</div>
+    <div style="text-align:left;">
+      <div style="font-size:13px;letter-spacing:.18em;color:#888;font-family:'JetBrains Mono',ui-monospace,monospace;">SZL HOLDINGS</div>
+      <div style="font-size:21px;font-weight:600;color:#c9b787;line-height:1.15;">a11oy</div>
+    </div>
+  </div>
+  <div style="margin-top:26px;width:168px;height:3px;border-radius:3px;background:rgba(201,183,135,.14);overflow:hidden;">
+    <div id="szl-bg-bar" style="height:100%;width:38%;border-radius:3px;background:linear-gradient(90deg,#5fb3a3,#c9b787);"></div>
+  </div>
+  <div id="szl-bg-msg" style="margin-top:16px;font-size:12px;letter-spacing:.08em;color:#9a9a9a;font-family:'JetBrains Mono',ui-monospace,monospace;">initializing&hellip;</div>
+</div>
+<style id="szl-bootguard-css">
+@keyframes szlBgSlide{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
+#szl-bg-bar{animation:szlBgSlide 1.25s cubic-bezier(.4,0,.2,1) infinite;}
+#szl-bootguard{transition:opacity .42s ease;}
+#szl-bootguard.szl-bg-hide{opacity:0;pointer-events:none;}
+@media (prefers-reduced-motion: reduce){
+  #szl-bg-bar{animation:none;width:100%;}
+  #szl-bootguard{transition:none;}
+}
+</style>
+<script>
+/* Boot-guard controller (inline, no deps — runs immediately, before the heavy
+   bundle). Clears the splash the moment the first real view paints into #content;
+   degrades to an honest message if boot stalls; hard-caps removal so the guard can
+   NEVER itself become a stuck overlay. Honesty doctrine: no fabricated state. */
+(function(){
+  var g=document.getElementById('szl-bootguard'); if(!g) return;
+  var msg=document.getElementById('szl-bg-msg');
+  var done=false;
+  function clear(){
+    if(done) return; done=true;
+    try{ g.classList.add('szl-bg-hide'); }catch(e){}
+    setTimeout(function(){ try{ if(g&&g.parentNode) g.parentNode.removeChild(g); var s=document.getElementById('szl-bootguard-css'); if(s&&s.parentNode) s.parentNode.removeChild(s); }catch(e){} }, 480);
+  }
+  // Consider the app "booted" when #content holds real rendered markup (not the
+  // bare "loading…" seed). Watch for the first substantive paint.
+  function contentReady(){
+    var c=document.getElementById('content'); if(!c) return false;
+    var t=(c.textContent||'').trim();
+    // Seed states that are NOT "ready": the bare loading seed and an empty pane.
+    if(!t) return false;
+    if(c.children && c.children.length>0 && t!=='loading…' && t!=='loading\u2026') return true;
+    return false;
+  }
+  function tick(){ if(contentReady()) clear(); }
+  var mo;
+  try{
+    var c0=document.getElementById('content');
+    if(window.MutationObserver && c0){
+      mo=new MutationObserver(function(){ tick(); });
+      mo.observe(c0,{childList:true,subtree:true,characterData:true});
+    }
+  }catch(e){}
+  // Poll as a belt-and-suspenders backup (covers environments where the observer
+  // misses a synchronous innerHTML swap).
+  var poll=setInterval(function(){ tick(); if(done){ clearInterval(poll); try{mo&&mo.disconnect();}catch(e){} } }, 140);
+  // Honest stall message: if the shell is up but the first view hasn't painted in
+  // ~6s (slow cold boot / egress flap), tell the operator the truth — never a void.
+  setTimeout(function(){ if(!done && msg){ try{ msg.innerHTML='live meter reconnecting&hellip; <span style="color:#5fb3a3">shell ready</span>'; }catch(e){} } }, 6000);
+  // Hard cap: the branded chrome below is fully interactive on its own, so the
+  // splash MUST come down regardless — it can never be the thing that hangs.
+  setTimeout(clear, 9000);
+  // Also clear on full load as a floor.
+  if(document.readyState==='complete'){ setTimeout(tick,0); }
+  else { window.addEventListener('load', function(){ setTimeout(tick,300); }); }
+})();
+</script>
+<!-- ============================ END SZL BOOT-GUARD ============================ -->
 <div class="topbar">
   <button class="menu-btn" aria-label="Toggle navigation" aria-expanded="false" onclick="toggleSide()">☰</button>
   <span>SZL HOLDINGS</span><span class="sep">/</span>