[Lens] fix performance on pie settings slider (#77181)

elastic · Sep 14, 2020 · 42e03aa · 42e03aa
1 parent a49d8e8
commit 42e03aa
Showing 1 changed file with 31 additions and 10 deletions.
diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
@@ -6,6 +6,7 @@
 
 import './toolbar.scss';
 import React, { useState } from 'react';
+import { useDebounce } from 'react-use';
 import { i18n } from '@kbn/i18n';
 import {
  EuiFlexGroup,
@@ -192,19 +193,14 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
  fullWidth
  display="columnCompressed"
  >
- <EuiRange
- data-test-subj="indexPattern-dimension-formatDecimals"
+ <DecimalPlaceSlider
  value={layer.percentDecimals ?? DEFAULT_PERCENT_DECIMALS}
- min={0}
- max={10}
- showInput
- compressed
- onChange={(e) => {
+ setValue={(value) =>
  setState({
  ...state,
- layers: [{ ...layer, percentDecimals: Number(e.currentTarget.value) }],
- });
- }}
+ layers: [{ ...layer, percentDecimals: value }],
+ })
+ }
  />
  </EuiFormRow>
  <EuiHorizontalRule margin="s" />
@@ -279,3 +275,28 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
  </EuiFlexGroup>
  );
 }
+
+const DecimalPlaceSlider = ({
+ value,
+ setValue,
+}: {
+ value: number;
+ setValue: (value: number) => void;
+}) => {
+ const [localValue, setLocalValue] = useState(value);
+ useDebounce(() => setValue(localValue), 256, [localValue]);
+
+ return (
+ <EuiRange
+ data-test-subj="indexPattern-dimension-formatDecimals"
+ value={localValue}
+ min={0}
+ max={10}
+ showInput
+ compressed
+ onChange={(e) => {
+ setLocalValue(Number(e.currentTarget.value));
+ }}
+ />
+ );
+};