Extract setState queuing into a service, re-use it in EuiIcon (#2565)

* Extract datagrid's enqueue functionality into a re-usable service; put it to use in EuiIcon * changelog
elastic · Nov 26, 2019 · cfd81c6 · cfd81c6
1 parent b03fa30
commit cfd81c6
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 89 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Added `euiTextBreakWord()` to `EuiToast` header ([#2549](https://github.com/elastic/eui/pull/2549))
 - Fixed `.eui-textBreakAll` on Firefox ([#2549](https://github.com/elastic/eui/pull/2549))
 - Fixed `EuiBetaBadge` accessibility with `tab-index=0` ([#2559](https://github.com/elastic/eui/pull/2559))
+- Improved `EuiIcon` loading performance ([#2565](https://github.com/elastic/eui/pull/2565))
 
 ## [`16.0.1`](https://github.com/elastic/eui/tree/v16.0.1)
 

diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
@@ -114,18 +114,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  class="euiContextMenu__itemLayout"
  >
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  <span
  class="euiContextMenu__text"
  >
@@ -148,18 +143,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  2a
  </span>
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  </span>
  </button>
  <button
@@ -175,18 +165,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  2b
  </span>
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  </span>
  </button>
  <button
@@ -202,18 +187,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  2c
  </span>
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  </span>
  </button>
  </div>

diff --git a/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu_panel.test.tsx.snap
@@ -114,18 +114,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  class="euiContextMenu__itemLayout"
  >
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M10.843 13.069L6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  <span
  class="euiContextMenu__text"
  >
@@ -148,18 +143,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  2a
  </span>
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  </span>
  </button>
  <button
@@ -175,18 +165,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  2b
  </span>
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  </span>
  </button>
  <button
@@ -202,18 +187,13 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
  2c
  </span>
  <svg
- class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
+ class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
  focusable="false"
  height="16"
  viewBox="0 0 16 16"
  width="16"
  xmlns="http://www.w3.org/2000/svg"
- >
- <path
- d="M5.157 13.069l4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771z"
- fill-rule="nonzero"
- />
- </svg>
+ />
  </span>
  </button>
  </div>

diff --git a/src/components/datagrid/data_grid_inmemory_renderer.tsx b/src/components/datagrid/data_grid_inmemory_renderer.tsx
@@ -6,12 +6,13 @@ import React, {
  useMemo,
  useState,
 } from 'react';
-import { createPortal, unstable_batchedUpdates } from 'react-dom';
+import { createPortal } from 'react-dom';
 import {
  EuiDataGridCellValueElementProps,
  EuiDataGridCellProps,
 } from './data_grid_cell';
 import { EuiDataGridColumn, EuiDataGridInMemory } from './data_grid_types';
+import { enqueueStateChange } from '../../services/react';
 
 interface EuiDataGridInMemoryRendererProps {
  inMemory: EuiDataGridInMemory;
@@ -27,27 +28,6 @@ interface EuiDataGridInMemoryRendererProps {
 
 function noop() {}
 
-const _queue: Function[] = [];
-
-function processQueue() {
- // the queued functions trigger react setStates which, if unbatched,
- // each cause a full update->render->dom pass _per function_
- // instead, tell React to wait until all updates are finished before re-rendering
- unstable_batchedUpdates(() => {
- for (let i = 0; i < _queue.length; i++) {
- _queue[i]();
- }
- _queue.length = 0;
- });
-}
-
-function enqueue(fn: Function) {
- if (_queue.length === 0) {
- setTimeout(processQueue);
- }
- _queue.push(fn);
-}
-
 function getElementText(element: HTMLElement) {
  return 'innerText' in element
  ? element.innerText
@@ -71,7 +51,9 @@ const ObservedCell: FunctionComponent<{
  onCellRender(i, column, getElementText(ref));
  const observer = new MutationObserver(() => {
  // onMutation callbacks aren't in the component lifecycle, intentionally batch any effects
- enqueue(onCellRender.bind(null, i, column, getElementText(ref)));
+ enqueueStateChange(
+ onCellRender.bind(null, i, column, getElementText(ref))
+ );
  });
  observer.observe(ref, {
  characterData: true,

diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx
@@ -10,14 +10,14 @@ const prettyHtml = cheerio.load('');
 
 function testIcon(props: PropsOf<EuiIcon>) {
  return () => {
- const component = mount(<EuiIcon {...props} />);
-
+ expect.assertions(1);
  return new Promise(resolve => {
- setTimeout(() => {
+ const onIconLoad = () => {
  component.update();
  expect(prettyHtml(component.html())).toMatchSnapshot();
  resolve();
- }, 0);
+ };
+ const component = mount(<EuiIcon {...props} onIconLoad={onIconLoad} />);
  });
  };
 }

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
@@ -15,6 +15,7 @@ import { CommonProps, keysOf } from '../common';
 // TS file (dev/docs) or the JS file (distributed), and it's more effort than worth
 // to generate & git track a TS module definition for each icon component
 import { icon as empty } from './assets/empty.js';
+import { enqueueStateChange } from '../../services/react';
 
 const typeToPathMap = {
  addDataApp: 'app_add_data',
@@ -428,6 +429,10 @@ export type EuiIconProps = CommonProps &
  * Note that every size other than `original` assumes the provided SVG sits on a square viewbox.
  */
  size?: IconSize;
+ /**
+ * Callback when the icon has been loaded & rendered
+ */
+ onIconLoad?: () => void;
  };
 
 interface State {
@@ -500,12 +505,22 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
  // eslint-disable-next-line prefer-template
  './assets/' + typeToPathMap[iconType] + '.js'
  ).then(({ icon }) => {
- if (this.isMounted) {
- this.setState({
- icon,
- isLoading: false,
- });
- }
+ enqueueStateChange(() => {
+ if (this.isMounted) {
+ this.setState(
+ {
+ icon,
+ isLoading: false,
+ },
+ () => {
+ const { onIconLoad } = this.props;
+ if (onIconLoad) {
+ onIconLoad();
+ }
+ }
+ );
+ }
+ });
  });
  };
 
@@ -516,6 +531,7 @@ export class EuiIcon extends PureComponent<EuiIconProps, State> {
  color,
  className,
  tabIndex,
+ onIconLoad,
  ...rest
  } = this.props;
 

diff --git a/src/services/react.ts b/src/services/react.ts
@@ -0,0 +1,22 @@
+import { unstable_batchedUpdates } from 'react-dom';
+
+const _queue: Function[] = [];
+
+function processQueue() {
+ // the queued functions trigger react setStates which, if unbatched,
+ // each cause a full update->render->dom pass _per function_
+ // instead, tell React to wait until all updates are finished before re-rendering
+ unstable_batchedUpdates(() => {
+ for (let i = 0; i < _queue.length; i++) {
+ _queue[i]();
+ }
+ _queue.length = 0;
+ });
+}
+
+export function enqueueStateChange(fn: Function) {
+ if (_queue.length === 0) {
+ setTimeout(processQueue);
+ }
+ _queue.push(fn);
+}