react-native-livechart 4.24.1 → 4.25.0

package/src/hooks/useCandlePaths.ts

@@ -1,5 +1,4 @@
-import { Skia } from "@shopify/react-native-skia";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import {
   useDerivedValue,
   useFrameCallback,
@@ -8,12 +7,15 @@ import {
 } from "react-native-reanimated";
 import { CANDLE_METRICS_DEFAULTS, MS_PER_FRAME_60FPS } from "../constants";
 import type { SingleEngineState } from "../core/useLiveChartEngine";
+import { buildCandleBodyPath } from "../draw/candleBodyPath";
 import { buildCandleGeometry } from "../draw/candle";
 import { buildVolumeGeometry } from "../draw/volume";
 import type { ChartPadding } from "../draw/line";
 import { lerp } from "../math/lerp";
 import type { CandleMetrics, CandlePoint } from "../types";
+import { useVolumeRange } from "./useVolumeRange";
 import { usePathBuilder } from "./usePathBuilder";
+import { useDemandFrameLoop } from "./useDemandFrameLoop";
 
 const CANDLE_WIDTH_LERP_SPEED = 0.08;
 
@@ -40,6 +42,7 @@ export function useCandleWidthLerp(
   active: boolean,
   /** Runtime gate shared with the chart engine. */
   isFrameLoopActive?: SharedValue<boolean>,
+  autoSleep = false,
 ): SharedValue<number> {
   const targetCandleWidth = useDerivedValue(() => candleWidthSecs);
   const displayCandleWidth = useSharedValue(candleWidthSecs);
@@ -51,10 +54,10 @@ export function useCandleWidthLerp(
     () => candleLerpSpeed ?? CANDLE_WIDTH_LERP_SPEED,
   );
 
-  const widthFrameCallback = useFrameCallback((frameInfo) => {
+  const tickWidth = useCallback((dt: number) => {
     "worklet";
-    if (!active || isFrameLoopActive?.get() === false) return;
-    const dt = frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS;
+    if (!active || isFrameLoopActive?.get() === false) return false;
+    const previous = displayCandleWidth.get();
     const target = targetCandleWidth.get();
     const next = lerp(
       displayCandleWidth.get(),
@@ -62,12 +65,24 @@ export function useCandleWidthLerp(
       widthLerpSpeed.get(),
       dt,
     );
-    displayCandleWidth.set(Math.abs(target - next) < 0.01 ? target : next);
-  }, autostart);
+    const settled = Math.abs(target - next) < 0.01 ? target : next;
+    displayCandleWidth.set(settled);
+    return previous !== settled;
+  }, [active, isFrameLoopActive, displayCandleWidth, targetCandleWidth, widthLerpSpeed]);
+  const prepareWidth = useCallback(() => {
+    "worklet";
+    return [targetCandleWidth.get(), widthLerpSpeed.get(), isFrameLoopActive?.get()];
+  }, [targetCandleWidth, widthLerpSpeed, isFrameLoopActive]);
+  useDemandFrameLoop(autoSleep && autostart && active, prepareWidth, tickWidth);
+  const legacyActive = autostart && !autoSleep;
+  const widthFrameCallback = useFrameCallback((frameInfo) => {
+    "worklet";
+    tickWidth(frameInfo.timeSincePreviousFrame ?? MS_PER_FRAME_60FPS);
+  }, legacyActive);
   useEffect(() => {
     // `autostart` is an initial seed in Reanimated, not a reactive switch.
-    widthFrameCallback.setActive(autostart);
-  }, [autostart, widthFrameCallback]);
+    widthFrameCallback.setActive(legacyActive);
+  }, [legacyActive, widthFrameCallback]);
 
   return displayCandleWidth;
 }
@@ -118,50 +133,24 @@ export function useCandlePaths(
   });
 
   /* istanbul ignore next -- worklet */
-  const upBodiesPath = useDerivedValue(() => {
-    const b = upBodiesBuilder.value;
-    const { bodies } = geometry.value;
-    const radius = candleMetrics.bodyRadius;
-    for (let i = 0; i < bodies.length; i++) {
-      if (bodies[i].up) {
-        const bd = bodies[i];
-        const rr = radius > 0 ? Math.min(radius, bd.w / 2, bd.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bd.x, y: bd.y, width: bd.w, height: bd.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bd.x, bd.y, bd.w, bd.h));
-        }
-      }
-    }
-    return b.detach();
-  });
+  const upBodiesPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      upBodiesBuilder.get(),
+      geometry.get().bodies,
+      true,
+      candleMetrics.bodyRadius,
+    ),
+  );
 
   /* istanbul ignore next -- worklet */
-  const downBodiesPath = useDerivedValue(() => {
-    const b = downBodiesBuilder.value;
-    const { bodies } = geometry.value;
-    const radius = candleMetrics.bodyRadius;
-    for (let i = 0; i < bodies.length; i++) {
-      if (!bodies[i].up) {
-        const bd = bodies[i];
-        const rr = radius > 0 ? Math.min(radius, bd.w / 2, bd.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bd.x, y: bd.y, width: bd.w, height: bd.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bd.x, bd.y, bd.w, bd.h));
-        }
-      }
-    }
-    return b.detach();
-  });
+  const downBodiesPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      downBodiesBuilder.get(),
+      geometry.get().bodies,
+      false,
+      candleMetrics.bodyRadius,
+    ),
+  );
 
   /* istanbul ignore next -- worklet */
   const upWicksPath = useDerivedValue(() => {
@@ -192,6 +181,13 @@ export function useCandlePaths(
   // Volume bars share the candle window + (lerped) candle width so each bar sits
   // directly under its candle body. Empty unless a volume band is reserved.
   /* istanbul ignore next -- worklet */
+  const volumeRange = useVolumeRange(
+    candles,
+    engine.timestamp,
+    engine.displayWindow,
+    displayCandleWidth,
+    active && volumeBandHeight > 0,
+  );
   const volumeGeometry = useDerivedValue(() => {
     if (!active || !candles || volumeBandHeight <= 0) return { bars: [] };
     return buildVolumeGeometry(
@@ -205,54 +201,32 @@ export function useCandlePaths(
       volumeBandHeight,
       displayCandleWidth.get(),
       candleMetrics,
+      {
+        start: volumeRange.start.get(),
+        end: volumeRange.end.get(),
+        max: volumeRange.max.get(),
+      },
     );
   });
 
   /* istanbul ignore next -- worklet */
-  const upBarsPath = useDerivedValue(() => {
-    const b = upBarsBuilder.value;
-    const { bars } = volumeGeometry.value;
-    for (let i = 0; i < bars.length; i++) {
-      if (bars[i].up) {
-        const bar = bars[i];
-        const rr =
-          volumeRadius > 0 ? Math.min(volumeRadius, bar.w / 2, bar.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bar.x, y: bar.y, width: bar.w, height: bar.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bar.x, bar.y, bar.w, bar.h));
-        }
-      }
-    }
-    return b.detach();
-  });
-
+  const upBarsPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      upBarsBuilder.get(),
+      volumeGeometry.get().bars,
+      true,
+      volumeRadius,
+    ),
+  );
   /* istanbul ignore next -- worklet */
-  const downBarsPath = useDerivedValue(() => {
-    const b = downBarsBuilder.value;
-    const { bars } = volumeGeometry.value;
-    for (let i = 0; i < bars.length; i++) {
-      if (!bars[i].up) {
-        const bar = bars[i];
-        const rr =
-          volumeRadius > 0 ? Math.min(volumeRadius, bar.w / 2, bar.h / 2) : 0;
-        if (rr > 0) {
-          b.addRRect({
-            rect: { x: bar.x, y: bar.y, width: bar.w, height: bar.h },
-            rx: rr,
-            ry: rr,
-          });
-        } else {
-          b.addRect(Skia.XYWHRect(bar.x, bar.y, bar.w, bar.h));
-        }
-      }
-    }
-    return b.detach();
-  });
+  const downBarsPath = useDerivedValue(() =>
+    buildCandleBodyPath(
+      downBarsBuilder.get(),
+      volumeGeometry.get().bars,
+      false,
+      volumeRadius,
+    ),
+  );
 
   return {
     upBodiesPath,

package/src/hooks/useChartPaths.ts

@@ -1,3 +1,4 @@
+import { buildLineFillPaths } from "../draw/lineFillPaths";
 import { Skia, type SkPath } from "@shopify/react-native-skia";
 import { useRef } from "react";
 import { useDerivedValue, type SharedValue } from "react-native-reanimated";
@@ -8,13 +9,14 @@ import type {
 } from "../core/useLiveChartEngine";
 import { buildLinePoints, type ChartPadding } from "../draw/line";
 import { buildLineGapSegmentRanges } from "../draw/lineGap";
+import { makeLineSimplifyScratch, simplifyLinePoints } from "../math/simplify";
+import { makeSplineScratch } from "../math/spline";
+import { thresholdSampleSpanX } from "../math/threshold";
 import {
-  makeLineSimplifyScratch,
-  simplifyLinePoints,
-} from "../math/simplify";
-import { drawSpline, makeSplineScratch } from "../math/spline";
-import { sampleThresholdYAt, thresholdSampleSpanX } from "../math/threshold";
-import { blendPtsY, squigglifyPts } from "../math/squiggly";
+  blendPtsY,
+  squiggleClockSeconds,
+  squigglifyPts,
+} from "../math/squiggly";
 import { usePathBuilder } from "./usePathBuilder";
 import type { CandleGap } from "../types";
 
@@ -31,7 +33,7 @@ export function resolveLineTipValue(
 
 /**
  * Builds the `linePath` / `fillPath` with `Skia.PathBuilder`s reused across
- * frames (one per curve, held in a SharedValue) and finalized with `detach()` —
+ * geometry updates (one per curve, held in a SharedValue) and finalized with `detach()` —
  * which returns a fresh immutable `SkPath` each frame and resets the builder.
  * The fresh reference makes Reanimated notify subscribers (re-record + repaint)
  * without the two-SkPath ping-pong the mutable-path pool needed.
@@ -69,6 +71,12 @@ export function useChartPaths(
 
   const cacheRef = useRef<{
     emptyPath: SkPath;
+    lastPts: number[] | null;
+    lastRanges: number[] | null;
+    lastLinear: boolean;
+    lastBottom: number;
+    lineOutput: SkPath | null;
+    fillOutput: SkPath | null;
     ptsA: number[];
     ptsB: number[];
     rawPts: number[];
@@ -87,6 +95,12 @@ export function useChartPaths(
   if (cacheRef.current === null) {
     cacheRef.current = {
       emptyPath: Skia.Path.Make(),
+      lastPts: null,
+      lastRanges: null,
+      lastLinear: false,
+      lastBottom: NaN,
+      lineOutput: null,
+      fillOutput: null,
       ptsA: [] as number[],
       ptsB: [] as number[],
       rawPts: [] as number[],
@@ -160,9 +174,11 @@ export function useChartPaths(
     // Compute squiggly Y values at the same X positions as the real line
     const centerY =
       (engine.canvasHeight.get() - padding.bottom + padding.top) / 2;
+    // Same wall clock as the loading shell's squiggle, so the wave stays
+    // continuous where the shell hands over to the morph.
     const squigglyPts = squigglifyPts(
       renderPts,
-      engine.timestamp.get(),
+      squiggleClockSeconds(),
       centerY,
       squiggleAmplitude,
       squiggleSpeed,
@@ -200,117 +216,77 @@ export function useChartPaths(
     );
   });
 
-  const linePath = useDerivedValue(() => {
+  // One derived rebuild keeps curve inputs and all outputs in the same revision.
+  // The spline solver emits to separate builders without extra command buffers.
+  const paths = useDerivedValue(() => {
     const cache = cacheRef.current!;
     const pts = flatPts.get();
-    const n = pts.length >> 1;
-    if (n < 2) return cache.emptyPath;
-    const b = lineBuilder.value;
     const ranges = segmentRanges.get();
-    if (ranges.length === 0) return cache.emptyPath;
-    for (let i = 0; i < ranges.length; i += 2) {
-      const start = ranges[i];
-      const end = ranges[i + 1];
-      b.moveTo(pts[start * 2], pts[start * 2 + 1]);
-      drawSpline(b, pts, cache.scratch, linear, start, end);
+    if (pts.length < 4 || ranges.length === 0) {
+      cache.lastPts = null;
+      return {
+        line: cache.emptyPath,
+        fill: cache.emptyPath,
+        band: cache.emptyPath,
+      };
     }
-    return b.detach();
-  });
-
-  const fillPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    const pts = flatPts.get();
-    const n = pts.length >> 1;
-    if (n < 2) return cache.emptyPath;
-    const b = fillBuilder.value;
-    const ranges = segmentRanges.get();
-    if (ranges.length === 0) return cache.emptyPath;
     const bottom = engine.canvasHeight.get() - padding.bottom;
-    for (let i = 0; i < ranges.length; i += 2) {
-      const start = ranges[i];
-      const end = ranges[i + 1];
-      const first = start * 2;
-      const last = (end - 1) * 2;
-      b.moveTo(pts[first], pts[first + 1]);
-      drawSpline(b, pts, cache.scratch, linear, start, end);
-      b.lineTo(pts[last], bottom);
-      b.lineTo(pts[first], bottom);
-      b.close();
-    }
-    return b.detach();
-  });
-
-  // Threshold-anchored fill: the same spline, closed along the threshold instead
-  // of the baseline, so the band lies between the line and the threshold (the
-  // profit/loss area). Painted with the split gradient/shader, the part above the
-  // split shows the above-color and the part below shows the below-color.
-  //
-  // `thresholdPts` (a time-varying series) closes the band along that polyline,
-  // right-to-left; otherwise `thresholdY` closes it at a single horizontal Y.
-  const thresholdFillPath = useDerivedValue(() => {
-    const cache = cacheRef.current!;
-    const pts = flatPts.get();
-    const n = pts.length >> 1;
-    if (n < 2) return cache.emptyPath;
-    const ranges = segmentRanges.get();
-    if (ranges.length === 0) return cache.emptyPath;
-
-    const tsamples = thresholdSamples?.get();
-    if (tsamples && tsamples.length >= 2) {
-      const b = thresholdFillBuilder.value;
-      // Band bottom = the SAMPLED threshold (identical to what the split shader
-      // reads), pinned to the LINE's x-range. Because the geometry and the shader
-      // use the same evenly-spaced, linearly-interpolated samples, a step riser
-      // ramps the same way in both — no green/red sliver bleeds through — and the
-      // x-range pin keeps the band closing with clean vertical sides (no wedge).
-      const count = tsamples.length;
-      // The samples live on the time-anchored, gliding grid — interpolate them
-      // across that span (same as the shader), not the static plot edges.
-      const [x0, x1] = thresholdSampleSpanX(
-        engine.timestamp.get(),
-        engine.displayWindow.get(),
-        padding.left,
-        engine.canvasWidth.get() - padding.right,
-        count,
+    // Buffers alternate on each geometry update. Identical references here
+    // therefore mean only the threshold changed, not the line geometry.
+    const bandOnly =
+      cache.lastPts === pts &&
+      cache.lastRanges === ranges &&
+      cache.lastLinear === linear &&
+      cache.lastBottom === bottom;
+    const samples = thresholdSamples?.get();
+    const sampled = samples != null && samples.length >= 2;
+    const y = thresholdY?.get() ?? NaN;
+    const hasBand = sampled || Number.isFinite(y);
+    const span = sampled
+      ? thresholdSampleSpanX(
+          engine.timestamp.get(),
+          engine.displayWindow.get(),
+          padding.left,
+          engine.canvasWidth.get() - padding.right,
+          samples.length,
+        )
+      : [0, 0];
+    const line = lineBuilder.get(),
+      fill = fillBuilder.get();
+    const band = hasBand ? thresholdFillBuilder.get() : undefined;
+    if (!bandOnly || band)
+      buildLineFillPaths(
+        line,
+        fill,
+        band,
+        pts,
+        ranges,
+        cache.scratch,
+        linear,
+        bottom,
+        y,
+        samples,
+        span[0],
+        span[1],
+        bandOnly,
       );
-      const step = (x1 - x0) / (count - 1);
-      for (let range = 0; range < ranges.length; range += 2) {
-        const start = ranges[range];
-        const end = ranges[range + 1];
-        const first = start * 2;
-        const last = (end - 1) * 2;
-        const leftX = pts[first];
-        const rightX = pts[last];
-        b.moveTo(leftX, pts[first + 1]);
-        drawSpline(b, pts, cache.scratch, linear, start, end);
-        b.lineTo(rightX, sampleThresholdYAt(tsamples, x0, x1, rightX));
-        for (let i = count - 1; i >= 0; i--) {
-          const sx = x0 + step * i;
-          if (sx > leftX && sx < rightX) b.lineTo(sx, tsamples[i]);
-        }
-        b.lineTo(leftX, sampleThresholdYAt(tsamples, x0, x1, leftX));
-        b.close();
-      }
-      return b.detach();
+    if (!bandOnly) {
+      cache.lineOutput = line.detach();
+      cache.fillOutput = fill.detach();
     }
-
-    if (!thresholdY) return cache.emptyPath;
-    const yT = thresholdY.get();
-    if (!Number.isFinite(yT)) return cache.emptyPath;
-    const b = thresholdFillBuilder.value;
-    for (let i = 0; i < ranges.length; i += 2) {
-      const start = ranges[i];
-      const end = ranges[i + 1];
-      const first = start * 2;
-      const last = (end - 1) * 2;
-      b.moveTo(pts[first], pts[first + 1]);
-      drawSpline(b, pts, cache.scratch, linear, start, end);
-      b.lineTo(pts[last], yT);
-      b.lineTo(pts[first], yT);
-      b.close();
-    }
-    return b.detach();
+    cache.lastPts = pts;
+    cache.lastRanges = ranges;
+    cache.lastLinear = linear;
+    cache.lastBottom = bottom;
+    return {
+      line: cache.lineOutput!,
+      fill: cache.fillOutput!,
+      band: band?.detach() ?? cache.emptyPath,
+    };
   });
+  const linePath = useDerivedValue(() => paths.get().line);
+  const fillPath = useDerivedValue(() => paths.get().fill);
+  const thresholdFillPath = useDerivedValue(() => paths.get().band);
 
   return { linePath, fillPath, thresholdFillPath } as const;
 }

package/src/hooks/useDegen.ts

@@ -50,6 +50,7 @@ export function useDegen(
 ): {
   pack: SharedValue<Float64Array<ArrayBuffer>>;
   packRevision: SharedValue<number>;
+  particleTimestamp: SharedValue<number>;
   shakeTransform: DerivedValue<
     [{ translateX: number }, { translateY: number }]
   >;
@@ -57,6 +58,7 @@ export function useDegen(
   const MAX_SLOTS = 80;
   const pack = useSharedValue(new Float64Array(MAX_SLOTS * DEGEN_STRIDE));
   const packRevision = useSharedValue(0);
+  const particleTimestamp = useSharedValue(0);
   const prevM = useSharedValue<Momentum>("flat");
   const writeRot = useSharedValue(0);
   const enabledSV = useSharedValue(0);
@@ -185,10 +187,12 @@ export function useDegen(
   // ChartWithDegen only mounts while the resolved effect is enabled; static
   // charts force that config to null and unmount this callback entirely.
   useFrameCallback(
-    /* istanbul ignore next -- worklet runs on UI thread, not in Jest */ () => {
+    /* istanbul ignore next -- worklet runs on UI thread, not in Jest */ (frame) => {
       "worklet";
       if (isFrameLoopActive?.get() === false) return;
-      const now = engine.timestamp.get();
+      // The viewport clock advances in half-pixel steps and may be pinned by
+      // nowOverride or pan. Effects need the continuous display-frame clock.
+      const now = frame.timestamp / 1000;
       const buf = pack.get();
       const slots = slotCountSV.get();
 
@@ -273,10 +277,10 @@ export function useDegen(
       );
 
       // Repaint only while particles are alive (or on the frame they all expire,
-      // so the overlay clears). When the field is empty the 4 derived values per
-      // slot stay subscribed to `packRevision` alone and freeze — no per-frame
-      // worklet churn for an idle particle system.
+      // so the overlay clears). Publish the same clock for Atlas size/opacity,
+      // only while particles are alive, to keep an idle field from repainting.
       if (activeCount > 0 || prevActiveCount.get() > 0) {
+        particleTimestamp.set(now);
         packRevision.set(packRevision.get() + 1);
       }
       prevActiveCount.set(activeCount);
@@ -291,5 +295,5 @@ export function useDegen(
     ];
   });
 
-  return { pack, packRevision, shakeTransform };
+  return { pack, packRevision, particleTimestamp, shakeTransform };
 }

package/src/hooks/useDemandFrameLoop.ts

@@ -0,0 +1,82 @@
+import { useCallback, useEffect } from "react";
+import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
+import { scheduleOnUI } from "react-native-worklets";
+
+/** Wait through several unchanged frames, rather than mistaking one quiet frame for rest. */
+export const IDLE_SETTLE_MS = 160;
+
+function noInputs() { "worklet"; return null; }
+function noReaction() { "worklet"; }
+
+export function nextQuietTime(previous: number, changed: boolean, dt: number): number {
+  "worklet";
+  return changed ? 0 : previous + Math.min(Math.max(dt, 0), 34);
+}
+
+/**
+ * Opt-in UI-runtime RAF loop. Inputs wake it without a JS-thread round trip.
+ * `tick` returns true while work changed or a continuous effect needs frames.
+ * `prepare` must read INPUTS only: subscribing to tick outputs causes feedback.
+ * A generation token makes queued frames harmless after replacement/unmount.
+ */
+export function useDemandFrameLoop(
+  enabled: boolean,
+  prepare: () => unknown,
+  tick: (dt: number) => boolean,
+): () => void {
+  const mounted = useSharedValue(false);
+  const running = useSharedValue(false);
+  const generation = useSharedValue(0);
+  const quietTime = useSharedValue(0);
+
+  const wake = useCallback(() => {
+    "worklet";
+    if (!enabled || !mounted.get()) return;
+    quietTime.set(0);
+    if (running.get()) return;
+    running.set(true);
+    const token = generation.get();
+    let previous: number | null = null;
+    function step(timestamp: number) {
+      "worklet";
+      if (!mounted.get() || generation.get() !== token) return;
+      // Resuming never integrates the entire sleeping interval as a single frame.
+      const dt = previous === null ? 1000 / 60 : Math.min(timestamp - previous, 34);
+      previous = timestamp;
+      const quiet = nextQuietTime(quietTime.get(), tick(dt), dt);
+      quietTime.set(quiet);
+      if (quiet < IDLE_SETTLE_MS) requestAnimationFrame(step);
+      else running.set(false);
+    }
+    requestAnimationFrame(step);
+  }, [enabled, mounted, running, generation, quietTime, tick]);
+
+  useAnimatedReaction(
+    // Pass the worklet itself: Reanimated extracts SharedValue subscriptions
+    // from its closure. Wrapping it in () => prepare() hides those inputs.
+    enabled ? prepare : noInputs,
+    enabled ? wake : noReaction,
+    [enabled, enabled ? prepare : noInputs, enabled ? wake : noReaction],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    scheduleOnUI(() => {
+      "worklet";
+      generation.set(generation.get() + 1);
+      running.set(false);
+      mounted.set(true);
+      wake();
+    });
+    return () => {
+      scheduleOnUI(() => {
+        "worklet";
+        mounted.set(false);
+        generation.set(generation.get() + 1);
+        running.set(false);
+      });
+    };
+  }, [enabled, generation, mounted, running, wake]);
+
+  return wake;
+}

package/src/hooks/useLoadingLook.ts

@@ -0,0 +1,30 @@
+import { useState } from "react";
+
+import type { ResolvedLoadingConfig } from "../core/resolveConfig";
+
+/** Field by field, with `Object.is` (a `NaN` must equal itself, or the render
+ * below would never settle), over every field the config has. */
+function sameLook(a: ResolvedLoadingConfig, b: ResolvedLoadingConfig | null) {
+  if (b === null) return false;
+  const keys = Object.keys(a) as (keyof ResolvedLoadingConfig)[];
+  return keys.every((key) => Object.is(a[key], b[key]));
+}
+
+/**
+ * The loading shell's look: the live `loading` config while loading, and the
+ * last one after. The shell fades out and the reveal morph melts its squiggle
+ * into the line only once `loading` has turned off, when `resolveLoading`
+ * already returns `null` — so they would otherwise snap to the default color,
+ * stroke, wave and Y-axis placeholders just as the data arrives. The empty
+ * shell ("No data") shown later keeps it too; before any loading, it has none
+ * and the defaults apply.
+ */
+export function useLoadingLook(
+  loadingCfg: ResolvedLoadingConfig | null,
+): ResolvedLoadingConfig | null {
+  const [last, setLast] = useState(loadingCfg);
+  // Stored from render (React's "previous props" pattern), compared by value:
+  // `resolveLoading` returns a fresh object for an inline config every render.
+  if (loadingCfg !== null && !sameLook(loadingCfg, last)) setLast(loadingCfg);
+  return loadingCfg ?? last;
+}