EuiDelayRender (#1876)

New EuiDelayRender component is introduced, please have a look at the documentation to find out how to use it.

This is a HOC so you can just wrap with it what you want and get delayed rendering.
Set a delay period in ms. Default is 500.

<EuiDelayRender delay={400}>
{...}
</EuiDelayRender >

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Added `onToggle` callback to `EuiAccordion` ([#1974](https://github.com/elastic/eui/pull/1974))
 - Removed `options` `defaultProps` value from `EuiSuperSelect` ([#1975](https://github.com/elastic/eui/pull/1975))
 - Removed TSlint and will perform all linting through ESLint ([#1950](https://github.com/elastic/eui/pull/1950))
+- Added new component `EuiDelayRender` ([#1876](https://github.com/elastic/eui/pull/1876))
 - Replaced `EuiColorPicker` with custom, customizable component ([#1914](https://github.com/elastic/eui/pull/1914))
 
 **Bug fixes**

src-docs/src/routes.js

@@ -68,6 +68,7 @@ import { CopyExample } from './views/copy/copy_example';
 import { DatePickerExample } from './views/date_picker/date_picker_example';
 
 import { DelayHideExample } from './views/delay_hide/delay_hide_example';
+import { DelayRenderExample } from './views/delay_render/delay_render_example';
 
 import { DescriptionListExample } from './views/description_list/description_list_example';
 
@@ -366,6 +367,7 @@ const navigation = [
       CopyExample,
       UtilityClassesExample,
       DelayHideExample,
+      DelayRenderExample,
       ErrorBoundaryExample,
       FocusTrapExample,
       HighlightExample,

src-docs/src/views/delay_render/delay_render.js

@@ -0,0 +1,59 @@
+import React, { Component, Fragment } from 'react';
+import {
+  EuiDelayRender,
+  EuiFlexItem,
+  EuiCheckbox,
+  EuiFormRow,
+  EuiFieldNumber,
+  EuiLoadingSpinner,
+} from '../../../../src/components';
+
+export default class extends Component {
+  state = {
+    minimumDelay: 3000,
+    render: false,
+  };
+
+  onChangeMinimumDelay = event => {
+    this.setState({ minimumDelay: parseInt(event.target.value, 10) });
+  };
+
+  onChangeHide = event => {
+    this.setState({ render: event.target.checked });
+  };
+
+  render() {
+    const status = this.state.render ? 'showing' : 'hidden';
+    const label = `Child (${status})`;
+    return (
+      <Fragment>
+        <EuiFlexItem>
+          <EuiFormRow>
+            <EuiCheckbox
+              id="dummy-id"
+              checked={this.state.render}
+              onChange={this.onChangeHide}
+              label="Show child"
+            />
+          </EuiFormRow>
+          <EuiFormRow label="Minimum delay">
+            <EuiFieldNumber
+              value={this.state.minimumDelay}
+              onChange={this.onChangeMinimumDelay}
+            />
+          </EuiFormRow>
+
+          <EuiFormRow label={label}>
+            {this.state.render ? (
+              <EuiDelayRender delay={this.state.minimumDelay}>
+                <EuiLoadingSpinner size="m" />
+              </EuiDelayRender>
+            ) : (
+              <Fragment />
+            )}
+          </EuiFormRow>
+        </EuiFlexItem>
+      </Fragment>
+    );
+  }
+}

src-docs/src/views/delay_render/delay_render_example.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import DelayRender from './delay_render';
+import { GuideSectionTypes } from '../../components';
+import { EuiCode, EuiDelayRender } from '../../../../src/components';
+import { renderToHtml } from '../../services';
+
+const delayRenderSource = require('!!raw-loader!./delay_render');
+const delayRenderHtml = renderToHtml(DelayRender);
+
+export const DelayRenderExample = {
+  title: 'Delay Render',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: delayRenderSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: delayRenderHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>EuiDelayRender</EuiCode> is a component for conditionally
+          toggling the visibility of a child component. It will ensure that the
+          child is hidden for at least 500ms (default). This allows delay UI
+          rendering. That is helpful when you need to update aria live region(s)
+          repeatedly.
+        </p>
+      ),
+      props: { EuiDelayRender },
+      demo: <DelayRender />,
+    },
+  ],
+};