Merge pull request #139 from aeagle/hotfix/107-resize-race-condition

Fix for race condition in resize operation

Author: aeagle

src/components/stories/04-testing/Testing.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta, Story, Canvas, Props } from "@storybook/addon-docs";
-import { StateDriven, AnchoredDefaultOrdering, SpaceDemoStacked1 } from "../Utils";
+import { StateDriven, AnchoredDefaultOrdering, SpaceDemoStacked1, StateDrivenSize } from "../Utils";
 
 <Meta title="Testing/State" />
 
@@ -19,4 +19,10 @@ import { StateDriven, AnchoredDefaultOrdering, SpaceDemoStacked1 } from "../Util
 	<Story name="Test stacked spaces">
 		<SpaceDemoStacked1 />
 	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="State driven size">
+		<StateDrivenSize />
+	</Story>
 </Canvas>

src/components/stories/Utils.tsx

@@ -323,6 +323,16 @@ export const StateDriven: React.FC = () => {
 	);
 };
 
+export const StateDrivenSize = () => {
+	const [size, setSize] = React.useState<number | string | undefined>(250);
+	return (
+		<ViewPort>
+			<LeftResizable size={size} onResizeEnd={(s) => setSize(s)}></LeftResizable>
+			<Fill></Fill>
+		</ViewPort>
+	);
+};
+
 export const AnchoredDefaultOrdering = () => {
 	return (
 		<ViewPort as="main">

src/core-resizing.ts

@@ -148,20 +148,33 @@ export function createResize(store: ISpaceStore) {
 				e.preventDefault();
 
 				if (RESIZE_THROTTLE > 0) {
-					throttle((x, y) => window.requestAnimationFrame(() => resize(x, y)), RESIZE_THROTTLE)(lastX, lastY);
+					throttle(
+						(x, y) =>
+							window.requestAnimationFrame(() => {
+								if (space.resizing) {
+									resize(x, y);
+								}
+							}),
+						RESIZE_THROTTLE,
+					)(lastX, lastY);
 				} else {
-					window.requestAnimationFrame(() => resize(lastX, lastY));
+					window.requestAnimationFrame(() => {
+						if (space.resizing) {
+							resize(lastX, lastY);
+						}
+					});
 				}
 			};
 
 			const removeListener = () => {
+				space.resizing = false;
+
 				if (moved) {
 					resize(lastX, lastY);
 				}
+
 				window.removeEventListener(moveEvent, withPreventDefault as EventListener);
 				window.removeEventListener(endEvent, removeListener);
-
-				space.resizing = false;
 				space.updateParent();
 
 				const resizeEnd = onResizeEnd || space.onResizeEnd;