Adding a content block loading animation. (#1730)

* Adding a placeholder content block loading animation.

* Fixing scss lint warning.

* increasing the contrast on the dark mode loader

* Implementing feedback.

* Switching from SVGs to regular ole' divs and animating via CSS

* Updating changelog.

* Tidying up the gradient and animation. Thanks, Ryan.

* CSS naming & variables file

* Transforming the x position rather than animating the background position.

* Fixing a className and some whitespace.

* Adding tests for the component.

CHANGELOG.md

@@ -11,6 +11,7 @@
 ## [`9.5.0`](https://github.com/elastic/eui/tree/v9.5.0)
 
 - Changed `EuiSuperDatePicker` to call `onRefresh` instead of `onTimeChanged` when user clicks "Refresh" button ([#1745](https://github.com/elastic/eui/pull/1745))
+- Added a new `EuiLoadingContent` component that displays blocks as placeholders for text. ([#1730](https://github.com/elastic/eui/pull/1730))
 - Added documentation entry in `EuiPagination` for `activePage` prop. ([#1740](https://github.com/elastic/eui/pull/1740))
 - Changed `EuiButton` to use "m" as it's default `size` prop ([#1742](https://github.com/elastic/eui/pull/1742))
 - Adds type definitions for `EuiListGroup` and `EuiListGroupItem` ([#1737](https://github.com/elastic/eui/pull/1737))

src-docs/src/views/loading/loading_content.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { EuiLoadingContent } from '../../../../src/components/loading';
+
+export default () => (
+  <div>
+    <EuiLoadingContent lines={3} />
+  </div>
+);

src-docs/src/views/loading/loading_example.js

@@ -7,9 +7,11 @@ import {
 } from '../../components';
 
 import {
+  EuiCode,
   EuiLoadingKibana,
   EuiLoadingSpinner,
   EuiLoadingChart,
+  EuiLoadingContent,
 } from '../../../../src/components';
 
 import LoadingKibana from './loading_kibana';
@@ -24,6 +26,10 @@ import LoadingSpinner from './loading_spinner';
 const loadingSpinnerSource = require('!!raw-loader!./loading_spinner');
 const loadingSpinnerHtml = renderToHtml(LoadingSpinner);
 
+import LoadingContent from './loading_content';
+const loadingContentSource = require('!!raw-loader!./loading_content');
+const loadingContentHtml = renderToHtml(LoadingContent);
+
 export const LoadingExample = {
   title: 'Loading',
   sections: [{
@@ -80,5 +86,23 @@ export const LoadingExample = {
     props: { EuiLoadingSpinner },
     demo: <LoadingSpinner />,
     snippet: `<EuiLoadingSpinner size="m" />`
+  }, {
+    title: 'Text Content',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: loadingContentSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      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>
+    ),
+    props: { EuiLoadingContent },
+    demo: <LoadingContent />,
+    snippet: `<EuiLoadingContent lines={3} />`
   }],
 };

src/components/index.js

@@ -200,6 +200,7 @@ export {
 export {
   EuiLoadingKibana,
   EuiLoadingChart,
+  EuiLoadingContent,
   EuiLoadingSpinner,
 } from './loading';