Explore: Move data source loader into the select (#19465)

public/app/features/explore/Explore.tsx

@@ -67,7 +67,6 @@ interface ExploreProps {
   changeSize: typeof changeSize;
   datasourceError: string;
   datasourceInstance: DataSourceApi;
-  datasourceLoading: boolean | null;
   datasourceMissing: boolean;
   exploreId: ExploreId;
   initializeExplore: typeof initializeExplore;
@@ -251,7 +250,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
       StartPage,
       datasourceInstance,
       datasourceError,
-      datasourceLoading,
       datasourceMissing,
       exploreId,
       showingStartPage,
@@ -272,7 +270,6 @@ export class Explore extends React.PureComponent<ExploreProps> {
     return (
       <div className={exploreClass} ref={this.getRef}>
         <ExploreToolbar exploreId={exploreId} onChangeTime={this.onChangeTime} />
-        {datasourceLoading ? <div className="explore-container">Loading datasource...</div> : null}
         {datasourceMissing ? this.renderEmptyState() : null}
 
         <FadeIn duration={datasourceError ? 150 : 5} in={datasourceError ? true : false}>
@@ -360,7 +357,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     StartPage,
     datasourceError,
     datasourceInstance,
-    datasourceLoading,
     datasourceMissing,
     initialized,
     showingStartPage,
@@ -406,7 +402,6 @@ function mapStateToProps(state: StoreState, { exploreId }: ExploreProps): Partia
     StartPage,
     datasourceError,
     datasourceInstance,
-    datasourceLoading,
     datasourceMissing,
     initialized,
     showingStartPage,

public/app/features/explore/ExploreToolbar.tsx

@@ -68,6 +68,7 @@ interface StateProps {
   isPaused: boolean;
   originPanelId: number;
   queries: DataQuery[];
+  datasourceLoading: boolean | null;
 }
 
 interface DispatchProps {
@@ -156,6 +157,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
       isLive,
       isPaused,
       originPanelId,
+      datasourceLoading,
     } = this.props;
 
     const styles = getStyles();
@@ -193,6 +195,7 @@ export class UnConnectedExploreToolbar extends PureComponent<Props, {}> {
                     onChange={this.onChangeDatasource}
                     datasources={exploreDatasources}
                     current={selectedDatasource}
+                    showLoading={datasourceLoading}
                   />
                 </div>
                 {supportedModes.length > 1 ? (
@@ -316,6 +319,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
     isPaused,
     originPanelId,
     queries,
+    datasourceLoading,
   } = exploreItem;
   const selectedDatasource = datasourceInstance
     ? exploreDatasources.find(datasource => datasource.name === datasourceInstance.name)
@@ -339,6 +343,7 @@ const mapStateToProps = (state: StoreState, { exploreId }: OwnProps): StateProps
     isPaused,
     originPanelId,
     queries,
+    datasourceLoading,
   };
 };