Data loading

Pan the chart to the left. As the visible range nears the data's start, <EdgeLoader> simulates a history fetch and shows its (now pluggable) boundary indicator.
BTC/USD200 candles · pan left
012345678901234567890123456789.0123456789012345678901234567890123456789
102.0103.0104.0102.5103.5
00:0012:0000:0012:0000:00
01 — SWAP THE SPINNER
<EdgeLoader> triggers onTrigger when panning/zooming nears the data edge — same mechanism as the load-on-scroll use case. What's new here: its indicator prop now accepts a function instead of just 'canvas' / 'custom'. skeletonLoadingIndicator paints muted placeholder candle shapes with a shimmer sweeping across them — the classic skeleton-screen pattern — with the bar nearest the boundary centered on the real candle's value, so it still reads as a continuation of the chart, not a generic spinner.
<EdgeLoader
  side="left"
  threshold={8}
  onTrigger={loadOlder}
  indicator={skeletonLoadingIndicator}
/>
02 — OR WRITE YOUR OWN
A LoadingIndicatorFn is a plain function — scope/theme to draw with, chartMediaWidth/chartMediaHeight for the clipped stage's size, side and edgeValueY (the boundary's real Y position, when resolvable) if you want to anchor to the real chart the way skeletonLoadingIndicator does. It's a peer of the built-in, not a second-class hook.
import type { LoadingIndicatorFn } from '@wick-charts/core';
 
// { scope, theme, chartMediaWidth, chartMediaHeight, now, side, edgeValueY }
const dashLoader: LoadingIndicatorFn = ({ scope, chartMediaWidth, chartMediaHeight }) => {
  scope.context.strokeRect(
    0, 0,
    chartMediaWidth * scope.horizontalPixelRatio,
    chartMediaHeight * scope.verticalPixelRatio,
  );
};
 
<EdgeLoader side="left" onTrigger={loadOlder} indicator={dashLoader} />
03 — THE ARRIVAL IS ANIMATED TOO
When the fetched history lands, the placeholders don't just vanish — this chart uses skeletonMorphIntro, so the real candles grow out of the exact shapes the skeleton was showing, blending from placeholder gray to their own colors, while deeper history waves in from the boundary. The choreography is the historyReveal series option: the same pluggable-function contract as introAnimation (fadeIntro is the default; riseIntro, candleUnfoldIntro and custom fns work unchanged), with the wave's stagger anchored at the boundary. Lines back-fill behind a clip front (backfillSweepIntro) instead.
// skeletonMorphIntro: the loading indicator reports its placeholder
// geometry, and the candles that land where placeholders stood GROW
// OUT of those exact shapes — gray placeholder becomes a real candle.
// Deeper history plays the fallback wave (fadeIntro by default).
<CandlestickSeries
  data={data}
  options={{ historyReveal: skeletonMorphIntro() }}
/>
 
// Any introAnimation-style factory works here too:
<CandlestickSeries data={data} options={{ historyReveal: riseIntro() }} />
 
// Opt out — new history appears instantly:
<CandlestickSeries data={data} options={{ historyReveal: 'none' }} />