superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: [SQL Lab] fix table metadata loading spinner (#7121)
Date Wed, 10 Apr 2019 03:51:40 GMT
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 79dbb3f  [SQL Lab] fix table metadata loading spinner (#7121)
79dbb3f is described below

commit 79dbb3f1fe13f0875e3c4d849f8e3bea4d3045ec
Author: Maxime Beauchemin <maximebeauchemin@gmail.com>
AuthorDate: Tue Apr 9 20:51:35 2019 -0700

    [SQL Lab] fix table metadata loading spinner (#7121)
    
    * [SQL Lab] fix table metadata loading spinner
    
    The loading spinner used to be close to the new table name that was just
    added, and recently flickers and disappears early.
    
    This puts the spinner where it's expected to be.
    
    * Use class
    
    * Addressing comments
    
    * adapt CSS
    
    * add missing license
---
 .../assets/src/SqlLab/components/TableElement.jsx  |  7 ++--
 .../src/components/{Loading.jsx => Loading.css}    | 40 ++--------------------
 superset/assets/src/components/Loading.jsx         |  8 +++--
 3 files changed, 13 insertions(+), 42 deletions(-)

diff --git a/superset/assets/src/SqlLab/components/TableElement.jsx b/superset/assets/src/SqlLab/components/TableElement.jsx
index 96027a9..ce8847e 100644
--- a/superset/assets/src/SqlLab/components/TableElement.jsx
+++ b/superset/assets/src/SqlLab/components/TableElement.jsx
@@ -190,7 +190,11 @@ class TableElement extends React.PureComponent {
         </div>
         <div className="pull-right">
           {table.isMetadataLoading || table.isExtraMetadataLoading ?
-            <Loading size={50} />
+            <Loading
+              size={50}
+              position="normal"
+              className="margin-zero"
+            />
             :
             this.renderControls()
           }
@@ -239,7 +243,6 @@ class TableElement extends React.PureComponent {
       <Collapse
         in={this.state.expanded}
         timeout={this.props.timeout}
-        transitionAppear
         onExited={this.removeFromStore.bind(this)}
       >
         <div className="TableElement table-schema m-b-10">
diff --git a/superset/assets/src/components/Loading.jsx b/superset/assets/src/components/Loading.css
similarity index 51%
copy from superset/assets/src/components/Loading.jsx
copy to superset/assets/src/components/Loading.css
index a7d8f40..4118962 100644
--- a/superset/assets/src/components/Loading.jsx
+++ b/superset/assets/src/components/Loading.css
@@ -16,42 +16,6 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  size: PropTypes.number,
-  position: PropTypes.oneOf(['floating', 'normal']),
-};
-const defaultProps = {
-  size: 50,
-  position: 'floating',
-};
-
-const FLOATING_STYLE = {
-  padding: 0,
-  margin: 0,
-  position: 'absolute',
-  left: '50%',
-  top: '50%',
-  transform: 'translate(-50%, -50%)',
-};
-
-export default function Loading({ size, position }) {
-  const style = position === 'floating' ? FLOATING_STYLE : {};
-  const styleWithWidth = {
-    ...style,
-    size,
-  };
-  return (
-    <img
-      className="loading"
-      alt="Loading..."
-      src="/static/assets/images/loading.gif"
-      style={styleWithWidth}
-    />
-  );
+img.loading.margin-zero {
+  margin: 0px;
 }
-
-Loading.propTypes = propTypes;
-Loading.defaultProps = defaultProps;
diff --git a/superset/assets/src/components/Loading.jsx b/superset/assets/src/components/Loading.jsx
index a7d8f40..5c132d9 100644
--- a/superset/assets/src/components/Loading.jsx
+++ b/superset/assets/src/components/Loading.jsx
@@ -19,13 +19,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import './Loading.css';
+
 const propTypes = {
   size: PropTypes.number,
   position: PropTypes.oneOf(['floating', 'normal']),
+  className: PropTypes.string,
 };
 const defaultProps = {
   size: 50,
   position: 'floating',
+  className: '',
 };
 
 const FLOATING_STYLE = {
@@ -37,7 +41,7 @@ const FLOATING_STYLE = {
   transform: 'translate(-50%, -50%)',
 };
 
-export default function Loading({ size, position }) {
+export default function Loading({ size, position, className }) {
   const style = position === 'floating' ? FLOATING_STYLE : {};
   const styleWithWidth = {
     ...style,
@@ -45,7 +49,7 @@ export default function Loading({ size, position }) {
   };
   return (
     <img
-      className="loading"
+      className={`loading ${className}`}
       alt="Loading..."
       src="/static/assets/images/loading.gif"
       style={styleWithWidth}


Mime
View raw message