Show chart history loading state

Author: thegeronimo

src/hyperopen/runtime/app_effects.cljs

@@ -20,6 +20,12 @@
                    state
                    path-values))))
 
+(defn- update-chart-history-backfill-pending
+  [state delta]
+  (let [current (or (get-in state [:chart-options :history-backfill-pending-count]) 0)
+        next-count (max 0 (+ current delta))]
+    (assoc-in state [:chart-options :history-backfill-pending-count] next-count)))
+
 (defn local-storage-set!
   [key value]
   (try
@@ -59,7 +65,8 @@
         active-asset (:active-asset @store)
         target-coin (if (seq requested-coin)
                       requested-coin
-                      active-asset)]
+                      active-asset)
+        historical-backfill? (some? end-time-ms)]
     (log-fn "Fetching candle snapshot..."
             (clj->js {:coin target-coin
                       :interval interval*
@@ -68,19 +75,26 @@
     (if (or (not target-coin)
             (not (request-active? active?-fn)))
       (js/Promise.resolve nil)
-      (-> (request-candle-snapshot-fn target-coin
-                                      :interval interval*
-                                      :bars bars*
-                                      :end-time-ms end-time-ms
-                                      :active?-fn active?-fn)
-          (.then (fn [rows]
-                   (when (request-active? active?-fn)
-                     (swap! store apply-candle-snapshot-success target-coin interval* rows))
-                   rows))
-          (.catch (fn [err]
-                    (when (request-active? active?-fn)
-                      (swap! store apply-candle-snapshot-error target-coin interval* err))
-                    (js/Promise.reject err)))))))
+      (do
+        (when historical-backfill?
+          (swap! store update-chart-history-backfill-pending 1))
+        (-> (request-candle-snapshot-fn target-coin
+                                        :interval interval*
+                                        :bars bars*
+                                        :end-time-ms end-time-ms
+                                        :active?-fn active?-fn)
+            (.then (fn [rows]
+                     (when (request-active? active?-fn)
+                       (swap! store apply-candle-snapshot-success target-coin interval* rows))
+                     (when historical-backfill?
+                       (swap! store update-chart-history-backfill-pending -1))
+                     rows))
+            (.catch (fn [err]
+                      (when (request-active? active?-fn)
+                        (swap! store apply-candle-snapshot-error target-coin interval* err))
+                      (when historical-backfill?
+                        (swap! store update-chart-history-backfill-pending -1))
+                      (js/Promise.reject err))))))))
 
 (defn init-websocket!
   [{:keys [ws-url

src/hyperopen/views/trading_chart/core.cljs

@@ -69,6 +69,7 @@
          volume-visible? (boolean (get chart-runtime-options :volume-visible? true))
          on-hide-volume-indicator (:on-hide-volume-indicator chart-runtime-options)
          on-history-backfill-request (:on-history-backfill-request chart-runtime-options)
+         history-backfill-loading? (boolean (:history-backfill-loading? chart-runtime-options))
          main-series-markers (memoized-main-series-markers indicator-markers
                                                            fill-markers
                                                            (:entry-marker position-overlay))
@@ -97,7 +98,9 @@
          chart-accessible-label (str (or (:symbol legend-meta) "Asset")
                                      " price chart, "
                                      (or (:timeframe-label legend-meta) "selected")
-                                     " timeframe")
+                                     " timeframe"
+                                     (when history-backfill-loading?
+                                       ", loading older candles"))
          on-render (runtime/chart-canvas-on-render
                     {:candle-data candle-data
                      :chart-type chart-type
@@ -119,10 +122,14 @@
                      :context-menu-deps context-menu-deps
                      :schedule-decoration-frame! *schedule-chart-decoration-frame!*
                      :cancel-decoration-frame! *cancel-chart-decoration-frame!*})]
-     [:div {:class ["w-full" "min-w-0" "relative" "flex-1" "min-h-[360px]" "overflow-hidden" "bg-base-100" "trading-chart-host"]
+     [:div {:class (cond-> ["w-full" "min-w-0" "relative" "flex-1" "min-h-[360px]"
+                            "overflow-hidden" "bg-base-100" "trading-chart-host"]
+                     history-backfill-loading?
+                     (conj "trading-chart-host--history-loading"))
             :data-parity-id "chart-canvas"
             :data-role "trading-chart-canvas"
             :role "region"
+            :aria-busy history-backfill-loading?
             :aria-label chart-accessible-label
             :tabindex 0
             :replicant/key (str "chart-" (hash active-indicators) "-" legend-key "-" volume-visible?)

src/hyperopen/views/trading_chart/runtime.cljs

@@ -125,6 +125,13 @@
                                :selected-timeframe selected-timeframe
                                :on-history-backfill-request on-history-backfill-request}))
 
+(defn- restore-token-current?
+  [node chart restore-token]
+  (let [{:keys [chart-obj visible-range-restore-token]} (chart-runtime/get-state node)
+        current-chart (when chart-obj (.-chart ^js chart-obj))]
+    (and (= restore-token visible-range-restore-token)
+         (identical? chart current-chart))))
+
 (defn- schedule-decoration-frame-fn
   [context]
   (let [schedule! (:schedule-decoration-frame! context)]
@@ -168,8 +175,9 @@
    selected-timeframe
    (assoc persistence-deps
           :on-visible-range-change! (fn []
-                                      (mark-visible-range-interaction! node)
-                                      (maybe-request-history-backfill! node chart)))))
+                                      (mark-visible-range-interaction! node))
+          :on-visible-range-event! (fn []
+                                     (maybe-request-history-backfill! node chart)))))
 
 (defn- start-visible-range-restore!
   [node chart candles selected-timeframe persistence-deps]
@@ -193,6 +201,9 @@
                             (:visible-range-restore-token runtime-state*))
                          (= interaction-epoch
                             (or (:visible-range-interaction-epoch runtime-state*) 0)))))))
+        (.then (fn [_]
+                 (when (restore-token-current? node chart restore-token)
+                   (maybe-request-history-backfill! node chart))))
         (.catch (fn [error]
                   (js/console.warn "Failed to restore persisted visible range:" error))))))
 
@@ -373,7 +384,8 @@
       (ci/set-volume-data! volume-series candle-data))
     (when chart
       (sync-history-backfill-context! node context)
-      (ensure-visible-range-lifecycle! node chart candle-data selected-timeframe persistence-deps))
+      (ensure-visible-range-lifecycle! node chart candle-data selected-timeframe persistence-deps)
+      (maybe-request-history-backfill! node chart))
     (when chart-obj
       (schedule-chart-decoration-pass! node context))
     (sync-indicator-series! chart-obj indicator-series-data)

src/hyperopen/views/trading_chart/utils/chart_interop/visible_range_persistence.cljs

@@ -416,11 +416,13 @@
                             persist-visible-range-fn
                             set-timeout-fn
                             clear-timeout-fn
-                            on-visible-range-change!]
+                            on-visible-range-change!
+                            on-visible-range-event!]
                      :or {debounce-ms visible-range-write-debounce-ms
                           set-timeout-fn platform/set-timeout!
                           clear-timeout-fn platform/clear-timeout!
-                          on-visible-range-change! (fn [] nil)}}]
+                          on-visible-range-change! (fn [] nil)
+                          on-visible-range-event! (fn [] nil)}}]
    (let [persist-visible-range!* (or persist-visible-range-fn
                                      (if storage-set!
                                        (fn [asset* timeframe* range-data]
@@ -455,11 +457,13 @@
                                 (when-let [range-data (visible-range-from-time-scale time-scale)]
                                   (queue-persist! range-data)))
              logical-handler (fn [range]
+                               (on-visible-range-event!)
                                (notify-visible-range-change!)
                                (if-let [range-data (range-candidate->data :logical range)]
                                  (queue-persist! range-data)
                                  (persist-current!)))
              time-handler (fn [range]
+                            (on-visible-range-event!)
                             (notify-visible-range-change!)
                             (if-let [range-data (range-candidate->data :time range)]
                               (queue-persist! range-data)

src/hyperopen/views/trading_chart/vm.cljs

@@ -88,6 +88,7 @@
         indicator-runtime-ready?
         on-hide-volume-indicator
         on-history-backfill-request
+        history-backfill-loading?
         active-asset
         candle-data
         on-liquidation-drag-preview
@@ -103,6 +104,7 @@
       :show-fill-markers? show-fill-markers?
       :on-hide-volume-indicator on-hide-volume-indicator
       :on-history-backfill-request on-history-backfill-request
+      :history-backfill-loading? history-backfill-loading?
       :persistence-deps {:asset active-asset
                          :candles candle-data}
       :on-liquidation-drag-preview on-liquidation-drag-preview
@@ -214,6 +216,8 @@
                                      dispatch-fn
                                      active-asset
                                      selected-timeframe)
+        history-backfill-loading? (pos? (or (get-in state [:chart-options :history-backfill-pending-count])
+                                            0))
         symbol (or active-asset "—")
         timeframe-label (str/upper-case (name selected-timeframe))
         price-decimals (or (:price-decimals active-market)
@@ -229,6 +233,7 @@
                                indicator-runtime-ready?
                                on-hide-volume-indicator
                                on-history-backfill-request
+                               history-backfill-loading?
                                active-asset
                                candle-data
                                on-liquidation-drag-preview

src/styles/surfaces/chart.css

@@ -12,4 +12,74 @@
     cursor: crosshair;
   }
 
+  .trading-chart-host--history-loading::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 16px;
+    z-index: 12;
+    pointer-events: none;
+    background:
+      linear-gradient(
+        180deg,
+        transparent 0%,
+        transparent 6%,
+        rgba(153, 246, 228, 0.94) 20%,
+        rgba(20, 184, 166, 0.96) 36%,
+        rgba(153, 246, 228, 0.94) 52%,
+        transparent 68%,
+        transparent 100%
+      ) left 0 / 3px 170% no-repeat,
+      linear-gradient(90deg, rgba(20, 184, 166, 0.13), transparent 100%) left top / 16px 100% no-repeat,
+      linear-gradient(180deg, rgba(20, 184, 166, 0.24), rgba(20, 184, 166, 0.08)) left top / 1px 100% no-repeat;
+    filter: drop-shadow(0 0 7px rgba(20, 184, 166, 0.4));
+    animation: chart-history-load-edge 1.18s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+  }
+
+  .trading-chart-host--history-loading::after {
+    content: "Loading older candles";
+    position: absolute;
+    top: 12px;
+    left: 12px;
+    z-index: 13;
+    pointer-events: none;
+    max-width: min(240px, calc(100% - 24px));
+    padding: 5px 8px;
+    border: 1px solid rgba(20, 184, 166, 0.28);
+    border-radius: 6px;
+    background: rgba(7, 17, 20, 0.82);
+    color: rgb(153, 246, 228);
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1.1;
+    letter-spacing: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+  }
+
+  @keyframes chart-history-load-edge {
+    0% {
+      background-position: left -115%, left top, left top;
+      opacity: 0.7;
+    }
+
+    58% {
+      opacity: 1;
+    }
+
+    100% {
+      background-position: left 155%, left top, left top;
+      opacity: 0.7;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .trading-chart-host--history-loading::before {
+      animation: none;
+    }
+  }
 }

test/hyperopen/runtime/app_effects_test.cljs

@@ -56,6 +56,36 @@
             {:coin "SPY" :interval :1d :bars 50 :end-time-ms 123456789}]
            @calls))))
 
+(deftest fetch-candle-snapshot-tracks-historical-backfill-pending-state-test
+  (async done
+    (let [resolve-request (atom nil)
+          store (atom {:active-asset "BTC"
+                       :chart-options {}})
+          request-fn (fn [& _]
+                       (js/Promise.
+                        (fn [resolve _reject]
+                          (reset! resolve-request resolve))))]
+      (-> (app-effects/fetch-candle-snapshot!
+           {:store store
+            :coin "BTC"
+            :interval :1d
+            :bars 552
+            :end-time-ms 1699999999999
+            :log-fn (fn [& _] nil)
+            :request-candle-snapshot-fn request-fn
+            :apply-candle-snapshot-success (fn [state coin interval rows]
+                                             (assoc-in state [:candles coin interval] rows))
+            :apply-candle-snapshot-error (fn [state coin interval err]
+                                           (assoc-in state [:candles coin interval :error] (str err)))})
+          (.then (fn [_rows]
+                   (is (= 0 (get-in @store [:chart-options :history-backfill-pending-count])))
+                   (done)))
+          (.catch (fn [err]
+                    (is false (str "Unexpected error: " err))
+                    (done))))
+      (is (= 1 (get-in @store [:chart-options :history-backfill-pending-count])))
+      (@resolve-request [{:t 1}]))))
+
 (deftest fetch-candle-snapshot-skips-when-request-is-inactive-test
   (async done
     (let [calls (atom 0)

test/hyperopen/views/trading_chart/core_test.cljs

@@ -411,6 +411,25 @@
       (chart-core/chart-canvas candle-data-new-identity :candlestick active-indicators-b legend-meta :4h chart-runtime-options)
       (is (= 4 @calls*) "new candle data identity should recompute indicator output"))))
 
+(deftest chart-canvas-renders-history-backfill-loading-affordance-test
+  (let [candle-data [{:time 1700000000 :open 100 :high 101 :low 99 :close 100 :volume 10}]
+        legend-meta {:symbol "BTC"
+                     :timeframe-label "1D"
+                     :venue "Hyperopen"
+                     :candle-data candle-data}
+        canvas (chart-core/chart-canvas
+                candle-data
+                :candlestick
+                {}
+                legend-meta
+                :1d
+                {:history-backfill-loading? true})]
+    (is (some #{"trading-chart-host--history-loading"}
+              (collect-all-classes canvas)))
+    (is (true? (get-in canvas [1 :aria-busy])))
+    (is (= "BTC price chart, 1D timeframe, loading older candles"
+           (get-in canvas [1 :aria-label])))))
+
 (deftest chart-canvas-mount-uses-volume-chart-creation-when-no-indicators-test
   (let [node #js {}
         candle-data [{:time 1700000000 :open 100 :high 101 :low 99 :close 100 :volume 10}]