loading animation

frontend/src/metabase/components/LoadingAndErrorWrapper.jsx

@@ -10,7 +10,7 @@ export default class LoadingAndErrorWrapper extends Component {
 
     state = {
         messageIndex: 0,
-        loadCount: 0
+        sceneIndex: 0,
     }
 
     static propTypes = {
@@ -24,7 +24,7 @@ export default class LoadingAndErrorWrapper extends Component {
         showSpinner:     PropTypes.bool,
         loadingMessages: PropTypes.array,
         messageInterval: PropTypes.number,
-        loadingTimeout:  PropTypes.number
+        loadingScenes:   PropTypes.array
     };
 
     static defaultProps = {
@@ -36,7 +36,6 @@ export default class LoadingAndErrorWrapper extends Component {
         showSpinner:    true,
         loadingMessages: ['Loading...'],
         messageInterval: 6000,
-        loadingTimeout: 20000,
     };
 
     getErrorMessage() {
@@ -54,7 +53,7 @@ export default class LoadingAndErrorWrapper extends Component {
         const { loadingMessages, messageInterval } = this.props;
         // only start cycling if multiple messages are provided
         if(loadingMessages.length > 1) {
-            this.cycle = setInterval(this.cycleLoadingMessage, messageInterval)
+            this.cycle = setInterval(this.loadingInterval, messageInterval)
         }
     }
 
@@ -63,8 +62,14 @@ export default class LoadingAndErrorWrapper extends Component {
     }
 
     loadingInterval = () => {
-        this.setState({ loadCount: this.state.loadCount + 1})
         this.cycleLoadingMessage()
+        if(this.props.loadingScenes) {
+            this.cycleLoadingScenes()
+        }
+    }
+
+    cycleLoadingScenes = () => {
+
     }
 
     getChildren() {
@@ -89,6 +94,14 @@ export default class LoadingAndErrorWrapper extends Component {
         })
     }
 
+    cycleLoadingScenes = () => {
+        this.setState({
+            sceneIndex: this.state.sceneIndex + 1 < this.props.loadingScenes.length -1
+            ? this.state.sceneIndex + 1
+            : 0
+        })
+    }
+
     render() {
         const {
             loading,
@@ -96,14 +109,16 @@ export default class LoadingAndErrorWrapper extends Component {
             noBackground,
             noWrapper,
             showSpinner,
-            loadingMessages
+            loadingMessages,
+            loadingScenes
         } = this.props;
 
-        const { messageIndex } = this.state;
+        const { messageIndex, sceneIndex } = this.state;
 
-        const contentClassName = cx("wrapper py4 text-brand text-centered flex-full flex flex-column layout-centered", {
-            "bg-white": !noBackground
-        });
+        const contentClassName = cx(
+            "wrapper py4 text-brand text-centered flex-full flex flex-column layout-centered",
+            { "bg-white": !noBackground }
+        );
 
         if (noWrapper && !error && !loading) {
             return React.Children.only(this.getChildren());
@@ -116,7 +131,8 @@ export default class LoadingAndErrorWrapper extends Component {
                     </div>
                 : loading ?
                         <div className={contentClassName}>
-                            { showSpinner && <LoadingSpinner /> }
+                            { loadingScenes && loadingScenes[sceneIndex] }
+                            { !loadingScenes && showSpinner && <LoadingSpinner /> }
                             <h2 className="text-normal text-grey-2 mt1">
                                 {loadingMessages[messageIndex]}
                             </h2>

frontend/src/metabase/css/core/base.css

@@ -77,3 +77,12 @@ textarea {
 .undefined {
     border: 1px solid red !important;
 }
+
+@keyframes spin {
+  100% { transform: rotate(360deg); }
+}
+
+@keyframes spin-reverse {
+  100% { transform: rotate(-360deg); }
+}
+

frontend/src/metabase/xray/components/LoadingAnimation.jsx

+import React from 'react'
+import Icon from 'metabase/components/Icon'
+
+const RotatingGear = ({name, speed, size, delay }) =>
+    <div style={{
+        animation: `${name} ${speed}ms linear ${delay}ms infinite`
+    }}>
+        <Icon name='gear' size={size} />
+    </div>
+
+RotatingGear.defaultProps = {
+    name: 'spin',
+    delay: 0,
+    speed: 5000
+}
+
+const LoadingAnimation = () =>
+    <div className="relative" style={{ width: 300, height: 180 }}>
+        <div className="absolute" style={{ top: 20, left: 135 }}>
+            <RotatingGear size={90} />
+        </div>
+        <div className="absolute" style={{ top: 60, left: 80 }}>
+            <RotatingGear name='spin-reverse' size={60} speed={6000} />
+        </div>
+        <div className="absolute" style={{ top: 110, left: 125 }}>
+            <RotatingGear speed={7000} size={45} />
+        </div>
+    </div>
+
+export default LoadingAnimation

frontend/src/metabase/xray/containers/SegmentComparison.jsx

@@ -16,6 +16,7 @@ import {
 
 import LoadingAndErrorWrapper from 'metabase/components/LoadingAndErrorWrapper'
 import XRayComparison from 'metabase/xray/components/XRayComparison'
+import LoadingAnimation from 'metabase/xray/components/LoadingAnimation'
 
 const mapStateToProps = (state) => ({
         comparison: getComparison(state),
@@ -65,10 +66,13 @@ class SegmentComparison extends Component {
                 error={error}
                 noBackground
                 loadingMessages={[
-                    'Generating ypur comparison...',
+                    'Generating your comparison...',
                     'Teaching robots to love...',
                     'Still working...',
                 ]}
+                loadingScenes={[
+                    <LoadingAnimation />
+                ]}
             >
                 { () =>