fix(ResizablePanel): infinite loop in controllable mode * 5

Author: tenphi

src/components/layout/ResizablePanel.stories.tsx

@@ -44,7 +44,6 @@ const TemplateTop: StoryFn<CubeResizablePanelProps> = (args) => {
 
 const TemplateControllable: StoryFn<CubeResizablePanelProps> = (args) => {
   const [size, setSize] = useState(200);
-
   return (
     <ResizablePanel
       size={size}

src/components/layout/ResizablePanel.tsx

@@ -217,19 +217,6 @@ function ResizablePanel(
   );
   let [visualSize, setVisualSize] = useState<number | null>(null);
 
-  useEffect(() => {
-    if (ref.current) {
-      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
-      const containerSize = ref.current[offsetProp];
-
-      if (Math.abs(containerSize - size) < 1 && !isDisabled) {
-        setVisualSize(size);
-      } else {
-        setVisualSize(containerSize);
-      }
-    }
-  }, [size, isDisabled]);
-
   let { moveProps } = useMove({
     onMoveStart(e) {
       if (isDisabled) {
@@ -267,14 +254,27 @@ function ResizablePanel(
     },
   });
 
+  useEffect(() => {
+    if (ref.current) {
+      const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
+      const containerSize = ref.current[offsetProp];
+
+      if (Math.abs(containerSize - size) < 1 && !isDisabled) {
+        setVisualSize(size);
+      } else {
+        setVisualSize(containerSize);
+      }
+    }
+  }, [size, isDisabled]);
+
   useEffect(() => {
     if (
-      (providedSize == null || Math.abs(providedSize - size) > 0.5) &&
+      (providedSize == null || Math.abs(providedSize - visualSize) > 0.5) &&
       !isDragging
     ) {
-      onSizeChange?.(Math.round(size));
+      onSizeChange?.(Math.round(visualSize));
     }
-  }, [size]);
+  }, [visualSize]);
 
   useEffect(() => {
     if (providedSize && Math.abs(providedSize - size) > 0.5) {