From c9dc4e01a05b21d9163c7d29d88ea31fd1468c20 Mon Sep 17 00:00:00 2001 From: Jorge Ji Date: Tue, 12 Mar 2024 19:57:43 +0000 Subject: [PATCH 1/2] Fix #25759: Panel resizing is not applied when done too fast When trying to resize any panel too fast, the changes would not be applied. The fix was done by changing a comparison condition in "useLayoutEffect()". Instead of using a variable ("prevManagerLayoutStateRef") that was also modified by another function ("useEffect()") that could execute at the same time, it now uses a variable that is only modified by the own function, making it so that the supposed layout values are not changed after they are set. --- code/ui/manager/src/components/layout/Layout.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index a17636ceadbd..f0c087b2dcad 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -81,7 +81,7 @@ const useLayoutSyncingState = ({ useLayoutEffect(() => { if ( internalDraggingSizeState.isDragging || // wait with syncing managerLayoutState until user is done dragging - layoutStateIsEqual(prevManagerLayoutStateRef.current, internalDraggingSizeState) // don't sync managerLayoutState if it doesn't differ from internalDraggingSizeState + layoutStateIsEqual(managerLayoutState, internalDraggingSizeState) // don't sync managerLayoutState if it doesn't differ from internalDraggingSizeStatee) ) { return; } @@ -95,7 +95,7 @@ const useLayoutSyncingState = ({ ...nextState, }; setManagerLayoutState(nextState); - }, [internalDraggingSizeState, setManagerLayoutState]); + }, [internalDraggingSizeState, managerLayoutState, setManagerLayoutState]); const isPagesShown = managerLayoutState.viewMode !== 'story' && managerLayoutState.viewMode !== 'docs'; From 18df4de9e3fb7216c1eb859c72702ecdab16d5f2 Mon Sep 17 00:00:00 2001 From: Jorge Ji Date: Sat, 27 Apr 2024 23:31:45 +0100 Subject: [PATCH 2/2] fix: remove state from dependency array --- code/ui/manager/src/components/layout/Layout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index f0c087b2dcad..3df7a5900dfb 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -95,7 +95,8 @@ const useLayoutSyncingState = ({ ...nextState, }; setManagerLayoutState(nextState); - }, [internalDraggingSizeState, managerLayoutState, setManagerLayoutState]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [internalDraggingSizeState, setManagerLayoutState]); const isPagesShown = managerLayoutState.viewMode !== 'story' && managerLayoutState.viewMode !== 'docs';