Add an animated thin progress bar component and use it on /explore (#7398)

* let's paint in a happy little loader

* this is what progress looks like

* remove overflow hidden

* clean up progress bar - wip

* usage examples

* fix animation and cleanup other uses

frontend/src/metabase/admin/datamodel/components/database/MetadataTableList.jsx

@@ -5,6 +5,7 @@ import ProgressBar from "metabase/components/ProgressBar.jsx";
 import Icon from "metabase/components/Icon.jsx";
 import { t } from "c-3po";
 import { inflect } from "metabase/lib/formatting";
+import { normal } from "metabase/lib/colors";
 
 import _ from "underscore";
 import cx from "classnames";
@@ -44,19 +45,22 @@ export default class MetadataTableList extends Component {
     if (this.props.tables) {
       let tables = _.sortBy(this.props.tables, "display_name");
       _.each(tables, table => {
+        const selected = this.props.tableId === table.id;
         let row = (
           <li key={table.id}>
             <a
               className={cx("AdminList-item flex align-center no-decoration", {
-                selected: this.props.tableId === table.id,
+                selected,
               })}
               onClick={this.props.selectTable.bind(null, table)}
             >
               {table.display_name}
-              <ProgressBar
-                className="ProgressBar ProgressBar--mini flex-align-right"
-                percentage={table.metadataStrength}
-              />
+              <span className="flex-align-right" style={{ width: 17 }}>
+                <ProgressBar
+                  percentage={table.metadataStrength}
+                  color={selected ? normal.grey2 : normal.grey1}
+                />
+              </span>
             </a>
           </li>
         );

frontend/src/metabase/components/ProgressBar.info.js

+import React from "react";
+import ProgressBar from "metabase/components/ProgressBar";
+
+export const component = ProgressBar;
+
+export const description = `
+Progress bar.
+`;
+export const examples = {
+  Default: <ProgressBar percentage={0.75} />,
+  Animated: <ProgressBar percentage={0.35} animated />,
+};

frontend/src/metabase/components/ProgressBar.jsx

+/* @flow */
 import React, { Component } from "react";
-import PropTypes from "prop-types";
+import cxs from "cxs";
+
+import { normal } from "metabase/lib/colors";
+
+type Props = {
+  percentage: number,
+  animated: boolean,
+  color: string,
+};
 
 export default class ProgressBar extends Component {
-  static propTypes = {
-    percentage: PropTypes.number.isRequired,
-  };
+  props: Props;
 
   static defaultProps = {
-    className: "ProgressBar",
+    animated: false,
+    color: normal.blue,
   };
 
   render() {
+    const { percentage, animated, color } = this.props;
+
+    const width = percentage * 100;
+
+    const wrapperStyles = cxs({
+      position: "relative",
+      border: `1px solid ${color}`,
+      height: 10,
+      borderRadius: 99,
+    });
+
+    const progressStyles = cxs({
+      overflow: "hidden",
+      backgroundColor: color,
+      position: "relative",
+      height: "100%",
+      top: 0,
+      left: 0,
+      borderRadius: "inherit",
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      width: `${width}%`,
+      ":before": {
+        display: animated ? "block" : "none",
+        position: "absolute",
+        content: '""', // need to wrap this in quotes so it actually outputs as valid CSS
+        left: 0,
+        width: `${width / 4}%`,
+        height: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.12)",
+        animation: animated ? "progress-bar 1.5s linear infinite" : "none",
+      },
+    });
+
     return (
-      <div className={this.props.className}>
-        <div
-          className="ProgressBar-progress"
-          style={{ width: this.props.percentage * 100 + "%" }}
-        />
+      <div className={wrapperStyles}>
+        <div className={progressStyles} />
       </div>
     );
   }

frontend/src/metabase/css/admin.css

@@ -180,14 +180,6 @@
   font-size: smaller;
 }
 
-.AdminList-item .ProgressBar {
-  opacity: 0.2;
-}
-
-.AdminList-item.selected .ProgressBar {
-  opacity: 1;
-}
-
 .AdminInput {
   color: var(--default-font-color);
   padding: var(--padding-1);
@@ -274,30 +266,6 @@
   color: white !important;
 }
 
-.ProgressBar {
-  position: relative;
-  border: 1px solid #6f7a8b;
-
-  width: 55px;
-  height: 10px;
-  border-radius: 99px;
-}
-.ProgressBar--mini {
-  width: 17px;
-  height: 8px;
-  border-radius: 2px;
-}
-.ProgressBar-progress {
-  background-color: #6f7a8b;
-  position: absolute;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-  border-radius: inherit;
-  border-top-left-radius: 0px;
-  border-bottom-left-radius: 0px;
-}
-
 .SaveStatus {
   line-height: 1;
 }

frontend/src/metabase/css/core/animation.css

+/* TODO - ideally this would be more reusable and not hardcode a value */
+@keyframes progress-bar {
+  from {
+    transform: translate3d(0, 0, 0, 0);
+  }
+  to {
+    transform: translate3d(1000px, 0, 0);
+  }
+}

frontend/src/metabase/css/core/index.css

+@import "./animation.css";
 @import "./arrow.css";
 @import "./base.css";
 @import "./bordered.css";

frontend/src/metabase/setup/containers/PostSetupApp.jsx

@@ -5,6 +5,7 @@ import React, { Component } from "react";
 import { Link } from "react-router";
 import ExplorePane from "metabase/components/ExplorePane";
 import MetabotLogo from "metabase/components/MetabotLogo";
+import ProgressBar from "metabase/components/ProgressBar";
 import Quotes from "metabase/components/Quotes";
 import { withBackground } from "metabase/hoc/Background";
 
@@ -143,7 +144,8 @@ export default class PostSetupApp extends Component {
                     <div className="mb1">
                       <Quotes quotes={QUOTES} period={2000} />
                     </div>
-                    <ThinProgressBar />
+                    {/*The percentage is hardcoded so we can animate this*/}
+                    <ProgressBar percentage={1} animated />
                   </div>
                 </BorderedPanel>
                 {sampleCandidates && (
@@ -191,16 +193,3 @@ const BorderedPanel = ({ className, style, children }) => (
     {children}
   </div>
 );
-
-const ThinProgressBar = () => (
-  <div className="bg-brand" style={{ height: 6, borderRadius: 99 }}>
-    <div
-      style={{
-        backgroundColor: "black",
-        opacity: 0.15,
-        height: 6,
-        width: 52,
-      }}
-    />
-  </div>
-);