EuiDelayRender

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Added ability to update `EuiInMemoryTable` `sorting` prop and remove columns after sorting is applied ([#1972](https://github.com/elastic/eui/pull/1972))
 - 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))
+- Added new component "Delay Render" ([#1876](https://github.com/elastic/eui/pull/1876))
 
 **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 />,
+    },
+  ],
+};