From 42e03aa14f3e55c3221e914984c079aff8e7a3e4 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Mon, 14 Sep 2020 11:46:43 +0200
Subject: [PATCH] [Lens] fix performance on pie settings slider (#77181)

---
 .../lens/public/pie_visualization/toolbar.tsx | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
index 9c3d0d0f34814d..501a2de24d9ad8 100644
--- 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));
+      }}
+    />
+  );
+};