react-native-vroom-chart 0.16.0 → 0.17.0

package/lib/index.mjs

@@ -158,8 +158,10 @@ var COLOR_KEYS = {
   // VROOM_COLOR_ACCENT_BULL
   accentBear: 15,
   // VROOM_COLOR_ACCENT_BEAR
-  lineColor: 16
+  lineColor: 16,
   // VROOM_COLOR_LINE
+  skeleton: 17
+  // VROOM_COLOR_SKELETON
 };
 var FLOAT_KEYS = {
   wickWidth: 1,
@@ -459,7 +461,7 @@ function ensureInstalled() {
   }
   installed = true;
 }
-function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, atr, movingAverages, vwap, bollingerBands, ichimoku, fairValueGaps, volume, priceLines, footprints, transition) {
+function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType, theme, rsi, macd, atr, movingAverages, vwap, bollingerBands, ichimoku, fairValueGaps, volume, priceLines, footprints, transition, loading) {
   const handleRef = useRef(null);
   const defaultWidthAppliedRef = useRef(false);
   const volumeCollapseRef = useRef(null);
@@ -494,18 +496,26 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const onFrameRef = useRef(transition?.onFrame);
   onFrameRef.current = transition?.onFrame;
   const seriesKey = transition?.seriesKey;
+  const loadingHandoffRef = useRef(false);
   const endIntervalMorph = useCallback(() => {
     if (intervalMorphRaf.current != null) {
       cancelAnimationFrame(intervalMorphRaf.current);
       intervalMorphRaf.current = null;
     }
-    handleRef.current?.setIntervalMorph(1);
+    const h = handleRef.current;
+    if (loadingHandoffRef.current) {
+      loadingHandoffRef.current = false;
+      h?.setLoadingMorph(1);
+      h?.beginLoadingReveal();
+    }
+    h?.setIntervalMorph(1);
   }, []);
-  const startIntervalMorph = useCallback((h) => {
+  const startIntervalMorph = useCallback((h, durationMs) => {
     const { ms, easing } = animRef.current;
+    const dur = durationMs ?? ms;
     const start = performance.now();
     const step = (now) => {
-      const p = Math.min(1, (now - start) / ms);
+      const p = Math.min(1, (now - start) / dur);
       h.setIntervalMorph(p < 1 ? ease(easing, p) : 1);
       const pic = h.render();
       if (pic) onFrameRef.current?.(pic);
@@ -513,6 +523,31 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     };
     intervalMorphRaf.current = requestAnimationFrame(step);
   }, []);
+  const startLoadingHandoff = useCallback(
+    (h) => {
+      const { ms, easing } = animRef.current;
+      const half = ms / 2;
+      loadingHandoffRef.current = true;
+      h.beginLoadingMorph();
+      const start = performance.now();
+      const step = (now) => {
+        const p = Math.min(1, (now - start) / half);
+        h.setLoadingMorph(p < 1 ? ease(easing, p) : 1);
+        const pic = h.render();
+        if (pic) onFrameRef.current?.(pic);
+        if (p < 1) {
+          intervalMorphRaf.current = requestAnimationFrame(step);
+          return;
+        }
+        intervalMorphRaf.current = null;
+        loadingHandoffRef.current = false;
+        h.beginLoadingReveal();
+        startIntervalMorph(h, half);
+      };
+      intervalMorphRaf.current = requestAnimationFrame(step);
+    },
+    [startIntervalMorph]
+  );
   const settleStream = useCallback((keepMorph = false) => {
     if (streamRaf.current != null) {
       cancelAnimationFrame(streamRaf.current);
@@ -582,6 +617,8 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
   const explicit = visibleRange != null;
   const startMs = visibleRange?.startMs ?? 0;
   const endMs = visibleRange?.endMs ?? 0;
+  const showLoadingLine = loading === true && candles.length === 0;
+  const lineUpRef = useRef(false);
   const themeKey = theme ? JSON.stringify(theme) : "";
   const rsiKey = rsi ? JSON.stringify(rsi) : "";
   const macdKey = macd ? JSON.stringify(macd) : "";
@@ -604,6 +641,19 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       defaultWidthAppliedRef.current = true;
     }
     let morphing = false;
+    if (showLoadingLine) {
+      if (!lineUpRef.current) {
+        endIntervalMorph();
+        settleStream();
+        h.setCandles(packCandles([]));
+        prevDataRef.current = null;
+      }
+      h.setLoading(true, !animRef.current.reduceMotion);
+      lineUpRef.current = true;
+    } else if (lineUpRef.current && candles.length === 0) {
+      h.setLoading(false, true);
+      lineUpRef.current = false;
+    }
     if (candles.length > 0) {
       const prev = prevDataRef.current;
       const freshHandle = prev == null || prev.handle !== h;
@@ -611,6 +661,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         const transitionKind = freshHandle ? "initial" : explicit ? "stream" : classifyTransition(prev.candles, candles, seriesKey !== prev.seriesKey);
         let tfArgs = null;
         let prevEnvelope = null;
+        let handOff = false;
         let stream = null;
         if (transitionKind === "stream" && prev != null && !explicit) {
           const { stream: mode, streamMs, reduceMotion } = animRef.current;
@@ -660,6 +711,11 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         } else if (transitionKind === "initial" || transitionKind === "reset") {
           endIntervalMorph();
         }
+        if (lineUpRef.current) {
+          lineUpRef.current = false;
+          handOff = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
+          if (!handOff) h.setLoading(false, true);
+        }
         h.setCandles(packCandles(candles));
         if (transitionKind === "timeframe") {
           const newStepMs = inferStepMs(candles);
@@ -681,6 +737,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
         } else if (transitionKind === "reset") {
           h.resetView();
         }
+        if (handOff) startLoadingHandoff(h);
         prevDataRef.current = { handle: h, candles, seriesKey };
       }
     }
@@ -710,7 +767,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
       footprints?.prints.length ? footprintsToSpec(footprints) : EMPTY_FOOTPRINTS
     );
     if (!morphing) setPicture(h.render());
-  }, [candles, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, atrKey, maKey, vwapKey, bollingerKey, ichimokuKey, fvgKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, endIntervalMorph, startStreamAnim, settleStream]);
+  }, [candles, showLoadingLine, seriesKey, size.width, size.height, size.pxRatio, explicit, startMs, endMs, defaultCandleWidth, themeKey, rsiKey, macdKey, atrKey, maKey, vwapKey, bollingerKey, ichimokuKey, fvgKey, volumeKey, priceLinesKey, footprintsKey, startIntervalMorph, startLoadingHandoff, endIntervalMorph, startStreamAnim, settleStream]);
   return { handle: handleRef.current, picture, volumeCollapseRef };
 }
 
@@ -722,6 +779,7 @@ function isSkImage(frame) {
 function VroomChart(props) {
   const {
     candles,
+    loading,
     seriesKey,
     width: widthProp,
     height: heightProp,
@@ -839,8 +897,10 @@ function VroomChart(props) {
       streamTransitionMs,
       reduceMotion,
       onFrame
-    }
+    },
+    loading
   );
+  const showLoadingLine = loading === true && candles.length === 0;
   const crosshairActive = useRef2(false);
   const footprintActive = useRef2(false);
   const lastCrosshairTime = useRef2(null);
@@ -1120,7 +1180,7 @@ function VroomChart(props) {
       pane: null
     });
   };
-  const pan = Gesture.Pan().runOnJS(true).maxPointers(1).onStart((e) => {
+  const pan = Gesture.Pan().enabled(!showLoadingLine).runOnJS(true).maxPointers(1).onStart((e) => {
     cancelDecay();
     panMode.current = hitAxis(e.x, e.y);
     priceDrag.current = null;
@@ -1215,7 +1275,7 @@ function VroomChart(props) {
     enableX: false,
     enableY: false
   });
-  const pinch = Gesture.Pinch().runOnJS(true).onTouchesDown((e) => {
+  const pinch = Gesture.Pinch().enabled(!showLoadingLine).runOnJS(true).onTouchesDown((e) => {
     if (e.numberOfTouches < 2) return;
     dismissFootprint();
     const [a, b] = e.allTouches;
@@ -1253,7 +1313,7 @@ function VroomChart(props) {
     if (next) applyFrame(next);
     maybeStartAnim();
   });
-  const longPress = Gesture.LongPress().runOnJS(true).onStart((e) => {
+  const longPress = Gesture.LongPress().enabled(!showLoadingLine).runOnJS(true).onStart((e) => {
     if (!handle) return;
     if (hitAxis(e.x, e.y) !== "chart") return;
     if (hitPriceLine(e.x, e.y)) return;
@@ -1273,7 +1333,7 @@ function VroomChart(props) {
       reason: "show"
     });
   });
-  const tap = Gesture.Tap().runOnJS(true).onStart((e) => {
+  const tap = Gesture.Tap().enabled(!showLoadingLine).runOnJS(true).onStart((e) => {
     if (!handle) return;
     const prints = footprints ?? [];
     const fp = prints.length ? handle.hitTestFootprint(e.x, e.y) : null;