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

@@ -21,6 +21,7 @@ const dummyProps: ExploreProps = {
   } as DataSourceApi,
   } as DataSourceApi,
   datasourceMissing: false,
   datasourceMissing: false,
   exploreId: ExploreId.left,
   exploreId: ExploreId.left,
+  loading: false,
   initializeExplore: jest.fn(),
   initializeExplore: jest.fn(),
   initialized: true,
   initialized: true,
   modifyQueries: jest.fn(),
   modifyQueries: jest.fn(),

public/app/features/explore/Explore.tsx

@@ -110,6 +110,7 @@ export interface ExploreProps {
   originPanelId: number;
   originPanelId: number;
   addQueryRow: typeof addQueryRow;
   addQueryRow: typeof addQueryRow;
   theme: GrafanaTheme;
   theme: GrafanaTheme;
+  loading: boolean;
   showMetrics: boolean;
   showMetrics: boolean;
   showTable: boolean;
   showTable: boolean;
   showLogs: boolean;
   showLogs: boolean;
@@ -287,8 +288,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
   }
   }
 
 
   renderGraphPanel(width: number) {
   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 (
     return (
       <ExploreGraphNGPanel
       <ExploreGraphNGPanel
         data={graphResult!}
         data={graphResult!}
@@ -298,7 +298,7 @@ export class Explore extends React.PureComponent<ExploreProps, ExploreState> {
         onUpdateTimeRange={this.onUpdateTimeRange}
         onUpdateTimeRange={this.onUpdateTimeRange}
         annotations={queryResponse.annotations}
         annotations={queryResponse.annotations}
         splitOpenFn={splitOpen}
         splitOpenFn={splitOpen}
-        isLoading={isLoading}
+        isLoading={loading}
       />
       />
     );
     );
   }
   }
@@ -482,6 +482,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     absoluteRange,
     absoluteRange,
     queryResponse,
     queryResponse,
     showNodeGraph,
     showNodeGraph,
+    loading,
   } = item;
   } = item;
 
 
   const { datasource, queries, range: urlRange, originPanelId } = (urlState || {}) as ExploreUrlState;
   const { datasource, queries, range: urlRange, originPanelId } = (urlState || {}) as ExploreUrlState;
@@ -514,6 +515,7 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     showTable,
     showTable,
     showTrace,
     showTrace,
     showNodeGraph,
     showNodeGraph,
+    loading,
   };
   };
 }
 }