From e057f55c7345df55529da35a3bdbb20eb1df44cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D0=BE=D0=B2=20=D0=90=D1=80=D1=82?=
 =?UTF-8?q?=D0=B5=D0=BC?= <apervov@alabuga.ru>
Date: Sun, 5 Jul 2026 16:24:46 +0300
Subject: [PATCH] =?UTF-8?q?BUR-64=20=D0=A3=D0=B1=D1=80=D0=B0=D0=BD=20loade?=
 =?UTF-8?q?r=20=D1=81=20=D0=B3=D1=80=D0=B0=D1=84=D0=B8=D0=BA=D0=B0.=20?=
 =?UTF-8?q?=D0=92=D0=BE=20=D0=B2=D1=80=D0=B5=D0=BC=D1=8F=20=D0=B7=D1=83?=
 =?UTF-8?q?=D0=BC=D0=B0=20=D1=85=D1=80=D0=B0=D0=BD=D0=B8=D0=BC=20=D0=BF?=
 =?UTF-8?q?=D1=80=D0=B5=D0=B4=D1=8B=D0=B4=D1=83=D1=89=D0=B5=D0=B5=20=D1=81?=
 =?UTF-8?q?=D0=BE=D1=81=D1=82=D0=BE=D1=8F=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=BE?=
 =?UTF-8?q?=20=D1=82=D0=B5=D1=85=20=D0=BF=D0=BE=D1=80,=20=D0=BF=D0=BE?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D0=BD=D0=B5=20=D0=BF=D1=80=D0=B8=D1=88=D0=BB?=
 =?UTF-8?q?=D0=B0=20=D0=BD=D0=BE=D0=B2=D0=B0=D1=8F=20=D1=81=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/history-chart/HistoryChart.tsx   | 19 +++++++++++++++++--
 .../history-chart/HistoryChartArea.tsx        |  2 +-
 .../history-chart/useHistoryChartQueries.ts   |  3 ++-
 3 files changed, 20 insertions(+), 4 deletions(-)

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<ReturnType<typeof setTimeout> | null>(null);
+  const lastReadyOptionRef = useRef<EChartsOption | null>(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 (
     <HistoryChartArea
-      hasData={series.length > 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 <div className="chart-placeholder">Разверните список показателей и выберите серию для графика</div>;
   }
 
-  if (loading) {
+  if (!hasData && loading) {
     return <div className="chart-placeholder">Загрузка графика...</div>;
   }
 
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,
     })),
   });