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

public/app/core/components/Select/DataSourcePicker.tsx

@@ -15,6 +15,7 @@ export interface Props {
   onBlur?: () => void;
   autoFocus?: boolean;
   openMenuOnFocus?: boolean;
+  showLoading?: boolean;
 }
 
 export class DataSourcePicker extends PureComponent<Props> {
@@ -35,7 +36,7 @@ export class DataSourcePicker extends PureComponent<Props> {
   };
 
   render() {
-    const { datasources, current, autoFocus, onBlur, openMenuOnFocus } = this.props;
+    const { datasources, current, autoFocus, onBlur, openMenuOnFocus, showLoading } = this.props;
 
     const options = datasources.map(ds => ({
       value: ds.name,
@@ -47,6 +48,7 @@ export class DataSourcePicker extends PureComponent<Props> {
       label: current.name,
       value: current.name,
       imgUrl: current.meta.info.logos.small,
+      loading: showLoading,
     };
 
     return (

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,
   };
 };
 

public/app/plugins/datasource/stackdriver/components/__snapshots__/QueryEditor.test.tsx.snap

@@ -318,6 +318,9 @@ Array [
                 <div
                   className="gf-form-select-box__img-value"
                 >
+                  <div
+                    className="css-zyq2zu"
+                  />
                   stackdriver auto
                 </div>
               </div>