From a1227b658b1d064dd7b701396ddc3d73ebc0e45e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 7 Nov 2019 17:10:57 +0700
Subject: [PATCH] render optimizations for slider

---
 src/components/node/NodeImageSlideBlock/index.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/node/NodeImageSlideBlock/index.tsx b/src/components/node/NodeImageSlideBlock/index.tsx
index 08ef1b80..10cf55dd 100644
--- a/src/components/node/NodeImageSlideBlock/index.tsx
+++ b/src/components/node/NodeImageSlideBlock/index.tsx
@@ -8,6 +8,7 @@ import { NODE_SETTINGS } from '~/redux/node/constants';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import { LoaderCircle } from '~/components/input/LoaderCircle';
+import { throttle } from 'throttle-debounce';
 
 interface IProps {
   is_loading: boolean;
@@ -33,6 +34,8 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
   const slide = useRef<HTMLDivElement>();
   const wrap = useRef<HTMLDivElement>();
 
+  const setHeightThrottled = useCallback(throttle(100, setHeight), [setHeight]);
+
   const images = useMemo(
     () =>
       (node && node.files && node.files.filter(({ type }) => type === UPLOAD_TYPES.IMAGE)) || [],
@@ -89,8 +92,12 @@ const NodeImageSlideBlock: FC<IProps> = ({ node, is_loading, updateLayout }) =>
 
     if (current !== Math.round(selected)) setCurrent(Math.round(selected));
 
-    setHeight(now);
-  }, [wrap, offset, heights, max_height, images, is_loading]);
+    if (!is_dragging) {
+      setHeight(now);
+    } else {
+      setHeightThrottled(now);
+    }
+  }, [is_dragging, wrap, offset, heights, max_height, images, is_loading]);
 
   const onDrag = useCallback(
     event => {