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

…c#77305)
cauemarcondes · Sep 14, 2020 · 4bcb2ba · 4bcb2ba
1 parent c9b2897
commit 4bcb2ba
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));
+      }}
+    />
+  );
+};