Przeglądaj źródła

Use the same panel loading indicator in explore as on dashboard's panel

Dominik Prokop 7 lat temu
rodzic
commit
05edb3e5ad

+ 5 - 2
public/app/features/explore/Panel.tsx

@@ -13,7 +13,6 @@ export default class Panel extends PureComponent<Props> {
   render() {
     const { isOpen, loading } = this.props;
     const iconClass = isOpen ? 'fa fa-caret-up' : 'fa fa-caret-down';
-    const loaderClass = loading ? 'explore-panel__loader explore-panel__loader--active' : 'explore-panel__loader';
     return (
       <div className="explore-panel panel-container">
         <div className="explore-panel__header" onClick={this.onClickToggle}>
@@ -24,7 +23,11 @@ export default class Panel extends PureComponent<Props> {
         </div>
         {isOpen && (
           <div className="explore-panel__body">
-            <div className={loaderClass} />
+            {loading && (
+              <span className="panel-loading">
+                <i className="fa fa-spinner fa-spin" />
+              </span>
+            )}
             {this.props.children}
           </div>
         )}

+ 2 - 2
public/sass/pages/_dashboard.scss

@@ -144,8 +144,8 @@ div.flot-text {
 
 .panel-loading {
   position: absolute;
-  top: -3px;
-  right: 0px;
+  top: 0;
+  right: 3px;
   z-index: 800;
   font-size: $font-size-sm;
   color: $text-color-weak;

+ 0 - 34
public/sass/pages/_explore.scss

@@ -112,40 +112,6 @@
     flex-wrap: wrap;
   }
 
-  .explore-panel__loader {
-    height: 2px;
-    position: relative;
-    overflow: hidden;
-    background: none;
-    margin: $panel-margin / 2;
-    transition: background-color 1s ease;
-  }
-
-  .explore-panel__loader--active {
-    background: $text-color-faint;
-  }
-
-  .explore-panel__loader--active:after {
-    content: ' ';
-    display: block;
-    width: 25%;
-    top: 0;
-    top: -50%;
-    height: 250%;
-    position: absolute;
-    animation: loader 2s cubic-bezier(0.17, 0.67, 0.83, 0.67);
-    animation-iteration-count: 100;
-    background: $blue;
-  }
-
-  @keyframes loader {
-    from {
-      left: -25%;
-    }
-    to {
-      left: 100%;
-    }
-  }
 
   .datasource-picker {
     min-width: 200px;