diff --git a/src/features/history-chart/HistoryChart.tsx b/src/features/history-chart/HistoryChart.tsx index 9bd53aa..0bc6795 100644 --- a/src/features/history-chart/HistoryChart.tsx +++ b/src/features/history-chart/HistoryChart.tsx @@ -1,4 +1,5 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'; +import type { EChartsOption } from 'echarts'; import { getHistoryGranularity, type HistoryAxisLabelFormat } from '../../utils/historyGranularity'; import type { DataZoomEventBatch, DataZoomState, HistoryZoomRange } from './chartTypes'; import { HistoryChartArea } from './HistoryChartArea'; @@ -139,6 +140,7 @@ export function HistoryChart({ const baseRangeRef = useRef(baseRange); const zoomRangeRef = useRef(zoomRange); const zoomTimerRef = useRef | null>(null); + const lastReadyOptionRef = useRef(null); const lines = useHistoryChartQueries({ edge, from: zoomRange.from, @@ -150,6 +152,7 @@ export function HistoryChart({ const series = useHistoryChartSeries(lines, zoomRange.granulate); const legendData = useMemo(() => lines.map((line) => line.label), [lines]); const loading = lines.some((line) => line.loading); + const hasData = series.length > 0; useEffect(() => { baseRangeRef.current = baseRange; @@ -184,6 +187,18 @@ export function HistoryChart({ [baseRange, legendData, series, zoomRange], ); + // Во время lazy-загрузки нового zoom-диапазона оставляем на экране последний готовый график. + // Так canvas не заменяется loader-ом и пользователь не теряет визуальный контекст. + const fallbackOption = loading && !hasData ? lastReadyOptionRef.current : null; + const displayOption = fallbackOption ?? option; + const displayHasData = hasData || Boolean(fallbackOption); + + useEffect(() => { + if (hasData) { + lastReadyOptionRef.current = option; + } + }, [hasData, option]); + const handleDataZoom = useCallback((event: DataZoomEventBatch) => { const state = (event.batch ?? [event]).find(isXAxisDataZoom); @@ -211,10 +226,10 @@ export function HistoryChart({ return ( 0} + hasData={displayHasData} hasSelection={tags.length > 0} loading={loading} - option={option} + option={displayOption} onDataZoom={handleDataZoom} /> ); diff --git a/src/features/history-chart/HistoryChartArea.tsx b/src/features/history-chart/HistoryChartArea.tsx index 9b23950..2649a14 100644 --- a/src/features/history-chart/HistoryChartArea.tsx +++ b/src/features/history-chart/HistoryChartArea.tsx @@ -31,7 +31,7 @@ export function HistoryChartArea({ return
Разверните список показателей и выберите серию для графика
; } - if (loading) { + if (!hasData && loading) { return
Загрузка графика...
; } diff --git a/src/features/history-chart/useHistoryChartQueries.ts b/src/features/history-chart/useHistoryChartQueries.ts index 67046de..017846d 100644 --- a/src/features/history-chart/useHistoryChartQueries.ts +++ b/src/features/history-chart/useHistoryChartQueries.ts @@ -1,5 +1,5 @@ import { useMemo } from 'react'; -import { useQueries } from '@tanstack/react-query'; +import { keepPreviousData, useQueries } from '@tanstack/react-query'; import { getHistory } from '../../entities/history/api'; import type { HistoryPoint } from '../../entities/history/types'; @@ -35,6 +35,7 @@ export function useHistoryChartQueries({ queryKey: ['history', edge, tag, from, to, granulate], queryFn: ({ signal }: { signal: AbortSignal }) => getHistory({ edge, tag, from, to, granulate }, signal), enabled, + placeholderData: keepPreviousData, })), });