diff --git a/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx b/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx index b0fd7e75b78..1619b54aa38 100644 --- a/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx +++ b/components/src/hardware-sim/Deck/MoveLabwareOnDeck.tsx @@ -111,30 +111,52 @@ export function MoveLabwareOnDeck( ? finalCoordinates : offDeckCoordinates + // The user can't see the splash animation if it happens off-deck. + // Skip it so there's no pause where it looks like nothing is happening. + const shouldAnimateSplashBeforeMove = + animationInitialCoordinates !== offDeckCoordinates + const shouldAnimateSplashAfterMove = + animationFinalCoordinates !== offDeckCoordinates + const shouldReset = usePositionChangeReset( animationInitialCoordinates, animationFinalCoordinates ) - const springProps = useSpring({ - reset: shouldReset, - config: { duration: 1000, easing: easings.easeInOutSine }, - from: { - ...animationInitialCoordinates, - splashOpacity: 0, - deckOpacity: 0, - }, - to: [ - { deckOpacity: 1 }, - { splashOpacity: 1 }, - { splashOpacity: 0 }, - { ...animationFinalCoordinates }, - { splashOpacity: 1 }, - { splashOpacity: 0 }, - { deckOpacity: 0 }, - ], - loop: true, - }) + const [springProps] = useSpring( + () => ({ + reset: shouldReset, + config: { duration: 1000, easing: easings.easeInOutSine }, + from: { + ...animationInitialCoordinates, + splashOpacity: 0, + deckOpacity: 0, + }, + to: [ + { deckOpacity: 1 }, + ...(shouldAnimateSplashBeforeMove + ? [{ splashOpacity: 1 }, { splashOpacity: 0 }] + : []), + { ...animationFinalCoordinates }, + ...(shouldAnimateSplashAfterMove + ? [{ splashOpacity: 1 }, { splashOpacity: 0 }] + : []), + { deckOpacity: 0 }, + ], + loop: true, + }), + // Dependency array: + [ + shouldReset, + // react-spring behaves weirdly if its props are updated too frequently. + // So make sure to filter out coordinate "updates" that are just object identity + // updates and not updates to the actual x/y/z components. + ...Object.values(animationInitialCoordinates), + ...Object.values(animationFinalCoordinates), + shouldAnimateSplashBeforeMove, + shouldAnimateSplashAfterMove, + ] + ) return (