Skip to main content

Loading State

Initial Loading State​

Loading state is a way dxcharts splits the initial chart data loading into chunks and fills the initial loader progress bar.

It consists of InitialLoadingItem array, some of them are necessary, 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>
    );
}

Further reading​