Restore hub iframe soft nav to cut blank tab switch gap.

Use fetch in-frame navigation with overlay and hover prefetch; show delayed hub loading spinner instead of hiding the iframe.

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/app.css

@@ -1183,6 +1183,7 @@ body.market-chart-fs-open {
   display: flex;
   flex-direction: column;
   background: var(--bg, #0a0e14);
+  isolation: isolate;
 }
 
 .instance-frame-shell.hidden {
@@ -1190,7 +1191,52 @@ body.market-chart-fs-open {
 }
 
 .instance-frame-shell.is-instance-nav-loading .instance-frame {
-  visibility: hidden;
+  pointer-events: none;
+}
+
+.instance-frame-loading {
+  display: none;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 49px;
+  z-index: 2;
+  align-items: center;
+  justify-content: center;
+  background: color-mix(in srgb, var(--bg, #0a0e14) 72%, transparent);
+  color: var(--muted, #8892b0);
+  font-size: 0.9rem;
+  pointer-events: none;
+}
+
+.instance-frame-shell.is-instance-nav-loading .instance-frame-loading {
+  display: flex;
+}
+
+.instance-frame-loading-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--border-soft);
+  background: color-mix(in srgb, var(--panel-solid) 88%, transparent);
+}
+
+.instance-frame-spinner {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid color-mix(in srgb, var(--muted, #8892b0) 35%, transparent);
+  border-top-color: var(--accent, #6eb5ff);
+  animation: instance-frame-spin 0.75s linear infinite;
+}
+
+@keyframes instance-frame-spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
 
 .instance-frame-toolbar {

manual_trading_hub/static/app.js

@@ -429,9 +429,24 @@
     return j.url;
   }
 
+  /** @type {number | null} */
+  let instanceFrameNavLoadingTimer = null;
+
   function setInstanceFrameNavLoading(loading) {
     const shell = document.getElementById("instance-frame-shell");
-    if (shell) shell.classList.toggle("is-instance-nav-loading", !!loading);
+    if (!shell) return;
+    if (instanceFrameNavLoadingTimer != null) {
+      clearTimeout(instanceFrameNavLoadingTimer);
+      instanceFrameNavLoadingTimer = null;
+    }
+    if (loading) {
+      instanceFrameNavLoadingTimer = window.setTimeout(() => {
+        shell.classList.add("is-instance-nav-loading");
+        instanceFrameNavLoadingTimer = null;
+      }, 140);
+      return;
+    }
+    shell.classList.remove("is-instance-nav-loading");
   }
 
   async function openInstance(exchangeId, nextPath, opts) {
@@ -3354,7 +3369,7 @@
         if (!d || typeof d !== "object") return;
         if (d.type === "instance-frame-navigating") {
           setInstanceFrameNavLoading(true);
-        } else if (d.type === "instance-frame-ready" || d.type === "instance-theme-ready") {
+        } else if (d.type === "instance-frame-ready") {
           setInstanceFrameNavLoading(false);
         }
       });

manual_trading_hub/static/index.html

@@ -561,6 +561,12 @@
           <button type="button" id="instance-frame-newtab" class="ghost">新标签打开</button>
         </div>
       </div>
+      <div id="instance-frame-loading" class="instance-frame-loading" aria-hidden="true">
+        <div class="instance-frame-loading-inner">
+          <span class="instance-frame-spinner" aria-hidden="true"></span>
+          <span>加载中…</span>
+        </div>
+      </div>
       <iframe id="instance-frame" class="instance-frame" title="交易所实例"></iframe>
     </div>
 
@@ -1040,6 +1046,6 @@
   <script src="/assets/dashboard.js?v=20260612-dash-monitor-count"></script>
   <script src="/assets/ai_review_render.js?v=3"></script>
   <script src="/assets/time_close_ui.js?v=2"></script>
-  <script src="/assets/app.js?v=20260614-calculator"></script>
+  <script src="/assets/app.js?v=20260614-instance-nav"></script>
 </body>
 </html>