Fix hub iframe nav flicker with normal navigation and loading overlay

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

manual_trading_hub/static/app.css

@@ -1189,6 +1189,10 @@ body.market-chart-fs-open {
   display: none !important;
 }
 
+.instance-frame-shell.is-instance-nav-loading .instance-frame {
+  visibility: hidden;
+}
+
 .instance-frame-toolbar {
   flex: 0 0 auto;
   display: flex;

manual_trading_hub/static/app.js

@@ -429,6 +429,11 @@
     return j.url;
   }
 
+  function setInstanceFrameNavLoading(loading) {
+    const shell = document.getElementById("instance-frame-shell");
+    if (shell) shell.classList.toggle("is-instance-nav-loading", !!loading);
+  }
+
   async function openInstance(exchangeId, nextPath, opts) {
     const options = opts || {};
     const newTab = !!options.newTab;
@@ -481,7 +486,10 @@
       );
       instanceFrameUrl = url;
       const frame = document.getElementById("instance-frame");
-      if (frame) frame.src = url;
+      if (frame) {
+        setInstanceFrameNavLoading(true);
+        frame.src = url;
+      }
     } catch (e) {
       showToast(String(e), true);
     }
@@ -498,6 +506,7 @@
     closeExchangeFullscreen();
     instanceFrameUrl = url;
     if (titleEl) titleEl.textContent = title || "实例";
+    setInstanceFrameNavLoading(true);
     frame.src = url;
     shell.classList.remove("hidden");
     shell.setAttribute("aria-hidden", "false");
@@ -528,6 +537,7 @@
     if (shell) {
       shell.classList.add("hidden");
       shell.setAttribute("aria-hidden", "true");
+      shell.classList.remove("is-instance-nav-loading");
     }
     document.body.classList.remove("hub-instance-frame-open");
   }
@@ -3332,6 +3342,23 @@
     const back = document.getElementById("instance-frame-back");
     const refresh = document.getElementById("instance-frame-refresh");
     const newTab = document.getElementById("instance-frame-newtab");
+    const frame = document.getElementById("instance-frame");
+    if (frame && frame.dataset.hubNavBound !== "1") {
+      frame.dataset.hubNavBound = "1";
+      frame.addEventListener("load", () => setInstanceFrameNavLoading(false));
+    }
+    if (!window.__hubInstanceFrameMsgBound) {
+      window.__hubInstanceFrameMsgBound = true;
+      window.addEventListener("message", (ev) => {
+        const d = ev.data;
+        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") {
+          setInstanceFrameNavLoading(false);
+        }
+      });
+    }
     if (back) back.onclick = () => closeInstanceFrame();
     if (refresh) refresh.onclick = () => refreshInstanceFrame();
     if (newTab) {