Skip to main content

Loading state

Initial loading state​

Loading state is the method that DXcharts uses to split the initial chart data loading into chunks and fills the initial loader progress bar.

It consists of the InitialLoadingItem array. Some of the components are required, but there is also a possibility to add custom ones.

interface InitialLoadingItem {
    itemName: string;
    item: Promise<unknown>;
    // used to describe how big is this item relatively to the others, by default item weight is 1
    itemWeight?: number;
}

Additional loading states​

Let's add additional loading state on chartDataProvider.requestHistoryData candles data load

export const ChartReactAppWithLoadingState = () => {
    const MOCK_PROVIDERS = CREATE_MOCK_PROVIDERS();
    const initialInstrument = 'AAPL';
    const initialPeriod: AggregationPeriod = useMemo(() => ({ duration: 1, durationType: 'h' }), []);
    const candlesLoadedPromise: Promise<ChartCandleData[]> = useMemo(
        () => MOCK_PROVIDERS.chartDataProvider.requestHistoryData(initialInstrument, initialPeriod),
        [MOCK_PROVIDERS.chartDataProvider, initialPeriod],
    );
    const initialLoading: InitialLoadingItem[] = [
        { itemName: 'candlesLoaded', item: candlesLoadedPromise, itemWeight: 1 },
    ];
    return (
        <ChartReactAppContainerStyled width={'100%'} height={500}>
            <ChartReactApp
                dependencies={{
                    ...MOCK_PROVIDERS,
                    initialLoading,
                }}
            />
        </ChartReactAppContainerStyled>
    );
}