From 5d52e50f6f923bf609f5d241703d49f06e701774 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Fri, 22 Jan 2021 18:15:06 +0100
Subject: [PATCH] Explore: Fix loading visualisation on the top of the new time
 series panel (#30553)

* Fix loading for time series graph panel

* Fix test by adding loading prop to dummyProps
---
 public/app/features/explore/Explore.test.tsx | 1 +
 public/app/features/explore/Explore.tsx      | 8 +++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx
index dfbe17207f0..3581c7c99d1 100644
--- a/public/app/features/explore/Explore.test.tsx
+++ b/public/app/features/explore/Explore.test.tsx
@@ -21,6 +21,7 @@ const dummyProps: ExploreProps = {
   } as DataSourceApi,
   datasourceMissing: false,
   exploreId: ExploreId.left,
+  loading: false,
   initializeExplore: jest.fn(),
   initialized: true,
   modifyQueries: jest.fn(),
diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx
index bbaff179ed5..842c36c3c3e 100644
--- a/public/app/features/explore/Explore.tsx
+++ b/public/app/features/explore/Explore.tsx
@@ -110,6 +110,7 @@ export interface ExploreProps {
   originPanelId: number;
   addQueryRow: typeof addQueryRow;
   theme: GrafanaTheme;
+  loading: boolean;
   showMetrics: boolean;
   showTable: boolean;
   showLogs: boolean;
@@ -287,8 +288,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   }
 
   renderGraphPanel(width: number) {
-    const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse } = this.props;
-    const isLoading = queryResponse.state === LoadingState.Loading;
+    const { graphResult, absoluteRange, timeZone, splitOpen, queryResponse, loading } = this.props;
     return (
       <ExploreGraphNGPanel
         data={graphResult!}
@@ -298,7 +298,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         onUpdateTimeRange={this.onUpdateTimeRange}
         annotations={queryResponse.annotations}
         splitOpenFn={splitOpen}
-        isLoading={isLoading}
+        isLoading={loading}
       />
     );
   }
@@ -482,6 +482,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     absoluteRange,
     queryResponse,
     showNodeGraph,
+    loading,
   } = item;
 
   const { datasource, queries, range: urlRange, originPanelId } = (urlState || {}) as ExploreUrlState;
@@ -514,6 +515,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     showTable,
     showTrace,
     showNodeGraph,
+    loading,
   };
 }