From 554da086289a1b392ab4c9983c39992f55e525e5 Mon Sep 17 00:00:00 2001 From: Robin Townsend Date: Fri, 9 Jun 2023 13:52:21 -0400 Subject: [PATCH] Fix tiles not animating in the new grid layout The new grid layout has been broken ever since upgrading react-spring, because it was apparently relying on a buggy behavior of react-spring that started transitions automatically even in imperative mode. react-spring 9.5.1 fixed that behavior, which means we now need to manually start the animations. --- src/video-grid/NewVideoGrid.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/video-grid/NewVideoGrid.tsx b/src/video-grid/NewVideoGrid.tsx index d8c45bf..3e74cdd 100644 --- a/src/video-grid/NewVideoGrid.tsx +++ b/src/video-grid/NewVideoGrid.tsx @@ -266,11 +266,16 @@ export const NewVideoGrid: FC = ({ }, leave: { opacity: 0, scale: 0, immediate: disableAnimations }, config: { mass: 0.7, tension: 252, friction: 25 }, - }), - [tiles, disableAnimations] + }) // react-spring's types are bugged and can't infer the spring type ) as unknown as [TransitionFn, SpringRef]; + // Because we're using react-spring in imperative mode, we're responsible for + // firing animations manually whenever the tiles array updates + useEffect(() => { + springRef.start(); + }, [tiles, springRef]); + const animateDraggedTile = (endOfGesture: boolean) => { const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!; const tile = tiles.find((t) => t.item.id === tileId)!;