Adding a content block loading animation.

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';
 

src/components/loading/_index.scss

@@ -1,4 +1,6 @@
+@import 'variables';
 @import 'mixins';
 @import 'loading_kibana';
 @import 'loading_chart';
+@import 'loading_content';
 @import 'loading_spinner';

src/components/loading/_loading_content.scss

@@ -0,0 +1,38 @@
+.euiLoadingContent__loader {
+  width: 100%;
+}
+
+.euiLoadingContent__singleLine {
+  width: 100%;
+  height: $euiSize;
+  margin-bottom: $euiSizeS;
+  border-radius: $euiBorderRadius;
+  overflow: hidden;
+
+  &:last-child:not(:only-child) {
+    width: 75%;
+  }
+}
+
+.euiLoadingContent__singleLineBackground {
+  width: 220%;
+  height: 100%;
+  background: linear-gradient(
+    to right,
+    $euiGradientStartStop 45%,
+    $euiGradientMiddle 50%,
+    $euiGradientStartStop 55%,
+    );
+  animation: euiLoadingContentGradientLoad 1.5s $euiAnimSlightResistance infinite;
+}
+
+@keyframes euiLoadingContentGradientLoad {
+  0% {
+    transform: translateX(-53%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+

src/components/loading/_variables.scss

@@ -0,0 +1,2 @@
+$euiGradientStartStop: tintOrShade($euiColorLightShade, 5%, 12%);
+$euiGradientMiddle: tintOrShade($euiColorLightShade, 50%, 24%);

src/components/loading/index.ts

@@ -1,3 +1,4 @@
 export { EuiLoadingKibana } from './loading_kibana';
 export { EuiLoadingChart } from './loading_chart';
+export { EuiLoadingContent } from './loading_content';
 export { EuiLoadingSpinner } from './loading_spinner';

src/components/loading/loading_content.tsx

@@ -0,0 +1,29 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+import { CommonProps } from '../common';
+
+type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+
+export const EuiLoadingContent: FunctionComponent<
+  CommonProps &
+    HTMLAttributes<HTMLDivElement> & {
+      lines?: LineRange;
+    }
+> = ({ lines = 3, className, ...rest }) => {
+  const classes = classNames('euiLoadingContent', className);
+  const lineElements = [];
+
+  for (let i = 0; i < lines; i++) {
+    lineElements.push(
+      <div key={i} className="euiLoadingContent__singleLine">
+        <div className="euiLoadingContent__singleLineBackground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes} {...rest}>
+      {lineElements}
+    </div>
+  );
+};