From 5e9e6ddaf7de3504e9eea17aba0123db933ec0b4 Mon Sep 17 00:00:00 2001 From: Kristina Date: Tue, 2 Jan 2024 07:16:25 -0600 Subject: [PATCH] Explore: Graph should reuse old time range while waiting for queries (#79725) * Do not pass frames forward until data is done loading * UsePrevious to get last timerange before query is done --- public/app/features/explore/Graph/ExploreGraph.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/public/app/features/explore/Graph/ExploreGraph.tsx b/public/app/features/explore/Graph/ExploreGraph.tsx index 652ccffd42b..8846ba8c85f 100644 --- a/public/app/features/explore/Graph/ExploreGraph.tsx +++ b/public/app/features/explore/Graph/ExploreGraph.tsx @@ -1,5 +1,6 @@ import { identity } from 'lodash'; import React, { useEffect, useMemo, useState } from 'react'; +import { usePrevious } from 'react-use'; import { AbsoluteTimeRange, @@ -77,17 +78,18 @@ export function ExploreGraph({ eventBus, }: Props) { const theme = useTheme2(); - + const previousTimeRange = usePrevious(absoluteRange); + const baseTimeRange = loadingState === LoadingState.Loading && previousTimeRange ? previousTimeRange : absoluteRange; const timeRange = useMemo( () => ({ - from: dateTime(absoluteRange.from), - to: dateTime(absoluteRange.to), + from: dateTime(baseTimeRange.from), + to: dateTime(baseTimeRange.to), raw: { - from: dateTime(absoluteRange.from), - to: dateTime(absoluteRange.to), + from: dateTime(baseTimeRange.from), + to: dateTime(baseTimeRange.to), }, }), - [absoluteRange.from, absoluteRange.to] + [baseTimeRange.from, baseTimeRange.to] ); const fieldConfigRegistry = useMemo(