[sql lab] improvements to the left panel (#2709)

* [sql lab] improvements to the left panel

* better error handling with error notifications
* table is added instantly with a loading image

* Fixing tests

* Fixed tests

superset/assets/javascripts/components/AsyncSelect.jsx

@@ -8,6 +8,7 @@ const propTypes = {
   dataEndpoint: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
   mutator: PropTypes.func.isRequired,
+  onAsyncError: PropTypes.func,
   value: PropTypes.number,
   valueRenderer: PropTypes.func,
   placeholder: PropTypes.string,
@@ -17,6 +18,7 @@ const propTypes = {
 const defaultProps = {
   placeholder: 'Select ...',
   valueRenderer: o => (<div>{o.label}</div>),
+  onAsyncError: () => {},
 };
 
 class AsyncSelect extends React.PureComponent {
@@ -42,6 +44,12 @@ class AsyncSelect extends React.PureComponent {
       if (this.props.autoSelect && this.state.options.length) {
         this.onChange(this.state.options[0]);
       }
+    })
+    .fail(() => {
+      this.props.onAsyncError();
+    })
+    .always(() => {
+      this.setState({ isLoading: false });
     });
   }
   render() {

superset/assets/javascripts/components/Loading.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const propTypes = {
+  size: PropTypes.number,
+};
+const defaultProps = {
+  size: 25,
+};
+
+export default function Loading(props) {
+  return (
+    <img
+      className="loading"
+      alt="Loading..."
+      src="/static/assets/images/loading.gif"
+      style={{
+        width: props.size,
+        height: props.size,
+        padding: 0,
+        margin: 0,
+      }}
+    />
+  );
+}
+Loading.propTypes = propTypes;
+Loading.defaultProps = defaultProps;