Stage trade startup work and harden Playwright readiness

Author: thegeronimo

docs/exec-plans/completed/2026-04-13-trade-startup-main-thread-staging.md

@@ -36,6 +36,10 @@
   [f]
   (startup-runtime-lib/schedule-post-render-startup! f))
 
+(defn yield-to-main!
+  []
+  (startup-runtime-lib/yield-to-main!))
+
 (defn startup-base-deps
   [{:keys [runtime store api]}]
   (startup-collaborators/startup-base-deps
@@ -282,6 +286,7 @@
                                                 effects (post-render-route-effects @startup-store path)]
                                             (when (seq effects)
                                               (nxr/dispatch startup-store nil effects))))
+       :yield-to-main! yield-to-main!
        :schedule-post-render-startup! schedule-post-render-startup!
        :kick-render! (fn [runtime-store]
                        (swap! runtime-store identity))}))))

src/hyperopen/app/startup.cljs

@@ -12,14 +12,12 @@
   (mark-performance! "app:init:start")
   (schedule-startup-summary-log!))
 
-(defn restore-persisted-ui-state!
+(defn restore-critical-ui-state!
   [{:keys [store
            restore-ui-font-preference!
            restore-ui-locale-preference!
-           restore-asset-selector-sort-settings!
            restore-chart-options!
            restore-orderbook-ui!
-           restore-portfolio-summary-time-range!
            restore-vaults-snapshot-range!
            restore-agent-storage-mode!
            restore-agent-passkey-capability!
@@ -28,24 +26,15 @@
            restore-spectate-mode-url!
            restore-trade-route-tab!
            restore-active-asset!
-           restore-asset-selector-markets-cache!
-           restore-leaderboard-preferences!
-           restore-open-orders-sort-settings!
-           restore-funding-history-pagination-settings!
-           restore-trade-history-pagination-settings!
-           restore-order-history-pagination-settings!]}]
+           restore-asset-selector-markets-cache!]}]
   ;; Restore root typography preference (system default, optional Inter override).
   (restore-ui-font-preference!)
   ;; Restore UI locale preference for number/date formatting ownership.
   (restore-ui-locale-preference! store)
-  ;; Restore asset selector sort settings from localStorage.
-  (restore-asset-selector-sort-settings! store)
   ;; Restore chart options from localStorage.
   (restore-chart-options! store)
   ;; Restore orderbook UI options from localStorage.
   (restore-orderbook-ui! store)
-  ;; Restore portfolio summary range selector from localStorage.
-  (restore-portfolio-summary-time-range! store)
   ;; Restore vault snapshot range selector from localStorage.
   (restore-vaults-snapshot-range! store)
   ;; Restore agent storage preference from localStorage.
@@ -65,7 +54,21 @@
   ;; Restore selected asset from localStorage (default to BTC).
   (restore-active-asset! store)
   ;; Restore cached selector market symbols for immediate dropdown population.
-  (restore-asset-selector-markets-cache! store)
+  (restore-asset-selector-markets-cache! store))
+
+(defn restore-deferred-ui-state!
+  [{:keys [store
+           restore-asset-selector-sort-settings!
+           restore-portfolio-summary-time-range!
+           restore-leaderboard-preferences!
+           restore-open-orders-sort-settings!
+           restore-funding-history-pagination-settings!
+           restore-trade-history-pagination-settings!
+           restore-order-history-pagination-settings!]}]
+  ;; Restore asset selector sort settings from localStorage.
+  (restore-asset-selector-sort-settings! store)
+  ;; Restore portfolio summary range selector from localStorage.
+  (restore-portfolio-summary-time-range! store)
   ;; Restore leaderboard timeframe, sort, and page-size preferences from IndexedDB.
   (when (fn? restore-leaderboard-preferences!)
     (restore-leaderboard-preferences! store))
@@ -91,6 +94,8 @@
            mark-post-render-trade-secondary-panels-ready!
            initialize-remote-data-streams!
            load-post-render-route-effects!
+           restore-deferred-ui-state!
+           yield-to-main!
            kick-render!
            schedule-post-render-startup!]}]
   (set-on-connected-handler! handle-wallet-connected)
@@ -105,22 +110,32 @@
   (kick-render! store)
   (let [post-render-startup!
         (fn []
-          ;; Install global keyboard shortcuts that should work regardless of focus target.
-          (when (fn? install-asset-selector-shortcuts!)
-            (install-asset-selector-shortcuts!))
-          ;; Install click-away behavior for positioned overlays (TP/SL, Reduce, Margin, Spectate Mode).
-          (when (fn? install-position-tpsl-clickaway!)
-            (install-position-tpsl-clickaway!))
-          ;; Register icon cache service worker for cross-reload symbol icon caching.
-          (register-icon-service-worker!)
-          ;; Reveal lower desktop trade surfaces after the first paint has landed.
-          (when (fn? mark-post-render-trade-secondary-panels-ready!)
-            (mark-post-render-trade-secondary-panels-ready! store))
-          ;; Defer route-specific heavyweight work until after the initial shell paint.
-          (when (fn? load-post-render-route-effects!)
-            (load-post-render-route-effects! store))
-          ;; Initialize remote data streams.
-          (initialize-remote-data-streams!))]
+          (-> (js/Promise.resolve nil)
+              (.then (fn [_]
+                       ;; Install global keyboard shortcuts that should work regardless of focus target.
+                       (when (fn? install-asset-selector-shortcuts!)
+                         (install-asset-selector-shortcuts!))
+                       ;; Install click-away behavior for positioned overlays (TP/SL, Reduce, Margin, Spectate Mode).
+                       (when (fn? install-position-tpsl-clickaway!)
+                         (install-position-tpsl-clickaway!))
+                       ;; Reveal lower desktop trade surfaces after the first paint has landed.
+                       (when (fn? mark-post-render-trade-secondary-panels-ready!)
+                         (mark-post-render-trade-secondary-panels-ready! store))
+                       ;; Defer route-specific heavyweight work until after the initial shell paint.
+                       (when (fn? load-post-render-route-effects!)
+                         (load-post-render-route-effects! store))
+                       ;; Initialize remote data streams.
+                       (initialize-remote-data-streams!)))
+              (.then (fn [_]
+                       (if (fn? yield-to-main!)
+                         (yield-to-main!)
+                         (js/Promise.resolve nil))))
+              (.then (fn [_]
+                       ;; Restore clearly non-visible UI state after first paint has settled.
+                       (when (fn? restore-deferred-ui-state!)
+                         (restore-deferred-ui-state!))
+                       ;; Register icon cache service worker for cross-reload symbol icon caching.
+                       (register-icon-service-worker!)))))]
     ;; Ensure first render is enqueued before expensive subscriptions/fetch startup work.
     (if (fn? schedule-post-render-startup!)
       (schedule-post-render-startup! post-render-startup!)
@@ -130,5 +145,9 @@
   [{:keys [log-fn] :as deps}]
   (log-fn "Initializing Hyperopen...")
   (reset-startup-state! deps)
-  (restore-persisted-ui-state! deps)
-  (initialize-systems! deps))
+  (restore-critical-ui-state! deps)
+  (initialize-systems!
+   (assoc deps
+          :restore-deferred-ui-state!
+          (fn []
+            (restore-deferred-ui-state! deps)))))

src/hyperopen/startup/init.cljs

@@ -0,0 +1,38 @@
+(ns hyperopen.startup.route-refresh
+  (:require [hyperopen.api-wallets.actions :as api-wallets-actions]
+            [hyperopen.funding-comparison.actions :as funding-comparison-actions]
+            [hyperopen.leaderboard.actions :as leaderboard-actions]
+            [hyperopen.portfolio.routes :as portfolio-routes]
+            [hyperopen.router :as router]
+            [hyperopen.staking.actions :as staking-actions]
+            [hyperopen.vaults.infrastructure.routes :as vault-routes]))
+
+(defn current-route-path
+  [state]
+  (router/normalize-path (or (get-in state [:router :path])
+                             "/trade")))
+
+(defn current-route-refresh-effects
+  [state new-address]
+  (let [route (current-route-path state)]
+    (cond-> (cond
+              (leaderboard-actions/leaderboard-route? route)
+              [[:actions/load-leaderboard-route route]]
+
+              (vault-routes/vault-route? route)
+              [[:actions/load-vault-route route]]
+
+              (funding-comparison-actions/funding-comparison-route? route)
+              [[:actions/load-funding-comparison-route route]]
+
+              (staking-actions/staking-route? route)
+              [[:actions/load-staking-route route]]
+
+              (api-wallets-actions/api-wallet-route? route)
+              [[:actions/load-api-wallet-route route]]
+
+              :else [])
+      (and new-address
+           (portfolio-routes/portfolio-route? route))
+      (conj [:actions/select-portfolio-chart-tab
+             (get-in state [:portfolio-ui :chart-tab])]))))

src/hyperopen/startup/route_refresh.cljs

@@ -1,24 +1,21 @@
 (ns hyperopen.startup.runtime
   (:require [clojure.string :as str]
+            [goog.object :as gobj]
             [hyperopen.account.surface-service :as account-surface-service]
             [hyperopen.account.context :as account-context]
             [hyperopen.api.info-client :as info-client]
             [hyperopen.platform :as platform]
-            [hyperopen.portfolio.routes :as portfolio-routes]
+            [hyperopen.startup.route-refresh :as route-refresh]
             [hyperopen.wallet.address-watcher :as address-watcher]))
-
 (defn default-startup-runtime-state
   []
   {:deferred-scheduled? false
    :bootstrapped-address nil
    :summary-logged? false})
-
 (def default-address-handler-name
   "startup-account-bootstrap-handler")
-
 (def ^:private default-user-handler-name
   "user-ws-subscription-handler")
-
 (def ^:private default-webdata2-handler-name
   "webdata2-subscription-handler")
 
@@ -46,6 +43,25 @@
   ;; Yield one macrotask so browser can paint before startup fetch/subscription work.
   (platform/set-timeout! f 0))
 
+(defn yield-to-main!
+  []
+  (let [scheduler-object (some-> (when (exists? js/globalThis) js/globalThis)
+                                 (.-scheduler))
+        yield-fn (some-> scheduler-object (gobj/get "yield"))
+        timeout-fallback (fn []
+                           (js/Promise.
+                            (fn [resolve _reject]
+                              (platform/set-timeout!
+                               (fn []
+                                 (resolve nil))
+                               0))))]
+    (if (fn? yield-fn)
+      (try
+        (.call yield-fn scheduler-object)
+        (catch :default _
+          (timeout-fallback)))
+      (timeout-fallback))))
+
 (defn reify-address-handler
   [on-address-changed-fn handler-name]
   (reify address-watcher/IAddressChangeHandler
@@ -394,6 +410,14 @@
         :resolve-current-address account-context/effective-account-address
         :log-fn log-fn})))))
 
+(defn- refresh-current-route!
+  [store dispatch! new-address]
+  (when (fn? dispatch!)
+    (when-let [effects (seq (route-refresh/current-route-refresh-effects
+                             @store
+                             new-address))]
+      (dispatch! store nil effects))))
+
 (defn install-address-handlers!
   [{:keys [store
            bootstrap-account-data!
@@ -431,19 +455,7 @@
       (if new-address
         (bootstrap-account-data! new-address)
         (clear-disconnected-account-state! deps))
-      (when (fn? dispatch!)
-        (let [route (or (get-in @store [:router :path])
-                        "/trade")]
-          (dispatch! store nil [[:actions/load-leaderboard-route route]])
-          (dispatch! store nil [[:actions/load-vault-route route]])
-          (dispatch! store nil [[:actions/load-funding-comparison-route route]])
-          (dispatch! store nil [[:actions/load-staking-route route]])
-          (dispatch! store nil [[:actions/load-api-wallet-route route]])
-          (when (and new-address
-                     (portfolio-routes/portfolio-route? route))
-            ;; Ensure returns benchmark candles load on initial portfolio view entry.
-            (dispatch! store nil [[:actions/select-portfolio-chart-tab
-                                   (get-in @store [:portfolio-ui :chart-tab])]])))))
+      (refresh-current-route! store dispatch! new-address))
     address-handler-name))
   ;; Ensure already-connected wallets are handled after handlers are in place.
   (when sync-current-address-on-install?
@@ -536,21 +548,8 @@
   ;; Ensure active-asset market streams are requested on startup.
   (when-let [asset (:active-asset @store)]
     (dispatch! store nil [[:actions/subscribe-to-asset asset]]))
-  (dispatch! store nil [[:actions/load-leaderboard-route
-                         (or (get-in @store [:router :path])
-                             "/trade")]])
-  (dispatch! store nil [[:actions/load-vault-route
-                         (or (get-in @store [:router :path])
-                             "/trade")]])
-  (dispatch! store nil [[:actions/load-funding-comparison-route
-                         (or (get-in @store [:router :path])
-                             "/trade")]])
-  (dispatch! store nil [[:actions/load-staking-route
-                         (or (get-in @store [:router :path])
-                             "/trade")]])
-  (dispatch! store nil [[:actions/load-api-wallet-route
-                         (or (get-in @store [:router :path])
-                             "/trade")]])
+  ;; Keep startup route refreshes scoped to the actual current route only.
+  (refresh-current-route! store dispatch! nil)
   (install-address-handlers!)
   ;; Keep startup scoped to the active trade route. Full selector-market expansion
   ;; off the critical path, but restore the prefetch as deferred idle work so the

src/hyperopen/startup/runtime.cljs

@@ -16,7 +16,8 @@
   (let [store (atom {:active-asset "BTC"})
         runtime (atom {:startup {}})
         captured-init-deps (atom nil)
-        summary-calls (atom [])]
+        summary-calls (atom [])
+        yield-calls (atom 0)]
     (with-redefs [startup-collaborators/startup-base-deps
                   (fn [deps]
                     (merge
@@ -30,15 +31,22 @@
                     (reset! captured-init-deps deps))
                   startup-runtime/schedule-startup-summary-log!
                   (fn [deps]
-                    (swap! summary-calls conj deps))]
+                    (swap! summary-calls conj deps))
+                  startup-runtime/yield-to-main!
+                  (fn []
+                    (swap! yield-calls inc)
+                    :yielded)]
       (app-startup/init! {:runtime runtime
                           :store store})
       (is (map? @captured-init-deps))
       (is (identical? startup-runtime/default-startup-runtime-state
                       (:default-startup-runtime-state @captured-init-deps)))
       ((:schedule-startup-summary-log! @captured-init-deps))
       (is (= [runtime-state/startup-summary-delay-ms]
-             (map :delay-ms @summary-calls))))))
+             (map :delay-ms @summary-calls)))
+      (is (= :yielded
+             ((:yield-to-main! @captured-init-deps))))
+      (is (= 1 @yield-calls)))))
 
 (deftest init-passes-trading-settings-restore-hook-into-startup-init-test
   (let [store (atom {})