From 2205ce0c3b7a25fe7ba73f56d19e753d1bd49141 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Mon, 10 Mar 2025 01:15:21 +0000
Subject: [PATCH] prevent slider flickers

---
 .../editor/components/common/node-width-resize.tsx        | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/features/editor/components/common/node-width-resize.tsx b/apps/client/src/features/editor/components/common/node-width-resize.tsx
index f78edba3..8393bc1c 100644
--- a/apps/client/src/features/editor/components/common/node-width-resize.tsx
+++ b/apps/client/src/features/editor/components/common/node-width-resize.tsx
@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useLayoutEffect, useState } from 'react';
 import { Slider } from '@mantine/core';
 
 export type ImageWidthProps = {
@@ -10,11 +10,11 @@ export type ImageWidthProps = {
 export const NodeWidthResize = memo(({ onChange, value, width }: ImageWidthProps) => {
   const [currentValue, setCurrentValue] = useState(value);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setCurrentValue(value);
   }, [value]);
 
-  const handleChange = useCallback(
+  const handleChangeEnd = useCallback(
     (newValue: number) => {
       onChange(newValue);
     },
@@ -27,7 +27,7 @@ export const NodeWidthResize = memo(({ onChange, value, width }: ImageWidthProps
       min={10}
       value={currentValue}
       onChange={setCurrentValue}
-      onChangeEnd={handleChange}
+      onChangeEnd={handleChangeEnd}
       w={width || 100}
       label={(value) => `${value}%`}
     />