fix(app): fix back to back manual move commands on desktop app (#17129)

Closes RQA-3728

Since the introduction of the move labware intervention deck map, chaining back to back move interventions has posed a challenge, see comments in #13005.

The setTimeout solution proposed in the linked PR effectively worked, and this code looks like it got dropped at some point. However, there are other ways of doing the same thing that are more React Spring-esque, using the API's reset property.

app/src/organisms/InterventionModal/MoveLabwareInterventionContent.tsx

@@ -191,7 +191,6 @@ export function MoveLabwareInterventionContent({
         <Flex width="50%">
           <Box margin="0 auto" width="100%">
             <MoveLabwareOnDeck
-              key={command.id} // important so that back to back move labware commands bust the cache
               robotType={robotType}
               deckFill={isOnDevice ? COLORS.grey35 : '#e6e6e6'}
               initialLabwareLocation={oldLabwareLocation}

components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx

@@ -191,7 +191,10 @@ export function MoveLabwareOnDeck(
       loadedLabware,
     }) ?? offDeckPosition
 
+  const shouldReset = usePositionChangeReset(initialPosition, finalPosition)
+
   const springProps = useSpring({
+    reset: shouldReset,
     config: { duration: 1000, easing: easings.easeInOutSine },
     from: {
       ...initialPosition,
@@ -245,6 +248,37 @@ export function MoveLabwareOnDeck(
   )
 }
 
+function usePositionChangeReset(
+  initialPosition: { x: number; y: number },
+  finalPosition: { x: number; y: number }
+): boolean {
+  const [shouldReset, setShouldReset] = React.useState(false)
+
+  React.useLayoutEffect(() => {
+    if (shouldReset) {
+      setShouldReset(false)
+      return
+    }
+
+    const isNewPosition =
+      previousInitialRef.current?.x !== initialPosition.x ||
+      previousInitialRef.current?.y !== initialPosition.y ||
+      previousFinalRef.current?.x !== finalPosition.x ||
+      previousFinalRef.current?.y !== finalPosition.y
+
+    if (isNewPosition) {
+      setShouldReset(true)
+    }
+
+    previousInitialRef.current = initialPosition
+    previousFinalRef.current = finalPosition
+  }, [initialPosition, finalPosition])
+
+  const previousInitialRef = React.useRef(initialPosition)
+  const previousFinalRef = React.useRef(finalPosition)
+
+  return shouldReset
+}
 /**
  * These animated components needs to be split out because react-spring and styled-components don't play nice
  * @see https://github.com/pmndrs/react-spring/issues/1515 */