From 5eaffc5769d97e9b4d9ff36956f46f90372b7ccc Mon Sep 17 00:00:00 2001
From: Davey Holler <daveyholler@gmail.com>
Date: Wed, 20 Mar 2019 10:52:51 -0700
Subject: [PATCH] Switching from SVGs to regular ole' divs and animating via
 CSS

---
 src-docs/src/views/loading/loading_example.js |  5 +-
 src/components/loading/_loading_content.scss  | 34 +++++++---
 src/components/loading/loading_content.tsx    | 62 +++----------------
 3 files changed, 36 insertions(+), 65 deletions(-)

diff --git a/src-docs/src/views/loading/loading_example.js b/src-docs/src/views/loading/loading_example.js
index 330def95fe48..48052af7da61 100644
--- a/src-docs/src/views/loading/loading_example.js
+++ b/src-docs/src/views/loading/loading_example.js
@@ -96,7 +96,10 @@ export const LoadingExample = {
       code: loadingContentHtml,
     }],
     text: (
-      <p>A simple loading animation for displaying placeholder text content. You can pass in a number of <EuiCode>lines</EuiCode> between 1 and 10.</p>
+      <p>
+        A simple loading animation for displaying placeholder text content.
+        You can pass in a number of <EuiCode>lines</EuiCode> between 1 and 10.
+      </p>
     ),
     props: { EuiLoadingContent },
     demo: <LoadingContent />,
diff --git a/src/components/loading/_loading_content.scss b/src/components/loading/_loading_content.scss
index 5b99f7312284..39466e70907e 100644
--- a/src/components/loading/_loading_content.scss
+++ b/src/components/loading/_loading_content.scss
@@ -1,22 +1,38 @@
+$gradientStartStop: shadeOrTint($euiColorLightShade, 0%, 15%);
+$gradientMiddle: shadeOrTint($euiColorLightestShade, 0%, 5%);
+
 .euiLoadingContent__loader {
   width: 100%;
 }
 
 .euiLoadingContent__single-line {
+  height: $euiSize;
+  margin-bottom: $euiSizeS;
+  border-radius: $euiBorderRadius;
   width: 100%;
-  fill: shadeOrTint($euiColorLightShade, 0%, 15%);
+  background-size: 400% 100% !important; // sass-lint:disable-line no-important
+  background-position: 0% 0%;
+  background: linear-gradient(
+    90deg,
+    $gradientStartStop 0%,
+    $gradientStartStop 25%,
+    $gradientMiddle 50%,
+    $gradientStartStop 75%,
+    $gradientStartStop 100%,
+  );
+  animation: GradientLoad 1s $euiAnimSlightResistance infinite;
 
-  &:last-child {
+  &:last-child:not(:only-child) {
     width: 75%;
   }
 }
 
-.euiLoadingContent__gradient--start-end {
-  stop-color: shadeOrTint($euiColorLightShade, 0%, 35%);
-  stop-opacity: 1;
-}
+@keyframes GradientLoad {
+  0% {
+    background-position: 100% 0%;
+  }
 
-.euiLoadingContent__gradient--middle {
-  stop-color: shadeOrTint($euiColorLightestShade, 0%, 15%);
-  stop-opacity: 1;
+  100% {
+    background-position: 0% 0%;
+  }
 }
diff --git a/src/components/loading/loading_content.tsx b/src/components/loading/loading_content.tsx
index a7ab9abe4706..1dbbe2fc47f9 100644
--- a/src/components/loading/loading_content.tsx
+++ b/src/components/loading/loading_content.tsx
@@ -1,75 +1,27 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
-import { htmlIdGenerator } from '../../services';
 
-const getMaskId = htmlIdGenerator('euiLoadingContent__mask--');
+type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
 
 export const EuiLoadingContent: FunctionComponent<
   CommonProps &
     HTMLAttributes<HTMLDivElement> & {
-      lines?: number;
+      lines?: LineRange;
     }
 > = ({ lines = 3, className, ...rest }) => {
   const classes = classNames('euiLoadingContent', className);
-  const maskId = getMaskId();
   const lineElements = [];
+
   for (let i = 0; i < lines; i++) {
     lineElements.push(
-      <rect
-        key={i}
-        className="euiLoadingContent__single-line"
-        y={i * 24}
-        width={lines === i + 1 ? '75%' : '100%'}
-        height="16"
-        rx="4"
-      />
+      <div key={i} className="euiLoadingContent__single-line" />
     );
   }
-  return (
-    // TODO: Remove the styles! They're only there for 👇development
-    <div className={classes} {...rest} style={{ marginBottom: '800px' }}>
-      <svg
-        viewBox="0 0"
-        height={lineElements.length * 24}
-        fill="none"
-        className="euiLoadingContent__loader">
-        <mask id={maskId}>{lineElements}</mask>
 
-        <linearGradient
-          id="euiLoadingContent__gradient"
-          x1="0%"
-          x2="100%"
-          y1="38%"
-          y2="40%">
-          <stop
-            className="euiLoadingContent__gradient--start-end"
-            offset="0%"
-          />
-          <stop className="euiLoadingContent__gradient--middle" offset="50%" />
-          <stop
-            className="euiLoadingContent__gradient--start-end"
-            offset="100%"
-          />
-          <animate
-            attributeName="x2"
-            dur="900ms"
-            from="20%"
-            to="300%"
-            repeatCount="indefinite"
-          />
-        </linearGradient>
-
-        <rect
-          id="shimmer"
-          x="0"
-          y="0"
-          width="100%"
-          height="100%"
-          fill="url(#euiLoadingContent__gradient)"
-          mask={`url(#${maskId}`}
-        />
-      </svg>
+  return (
+    <div className={classes} {...rest}>
+      {lineElements}
     </div>
   );
 };