Merge pull request #1121 from robintown/grid-performance

Improve the performance of dragging tiles in the large grid

src/video-grid/NewVideoGrid.tsx

@@ -257,7 +257,7 @@ export const NewVideoGrid: FC<Props> = ({
       enter: { opacity: 1, scale: 1, immediate: disableAnimations },
       update: ({ item, x, y, width, height }: Tile) =>
         item.id === dragState.current?.tileId
-          ? {}
+          ? null
           : {
               x,
               y,
@@ -281,10 +281,11 @@ export const NewVideoGrid: FC<Props> = ({
     const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
     const tile = tiles.find((t) => t.item.id === tileId)!;
 
-    springRef.start((_i, controller) => {
+    springRef.current
-      if ((controller.item as Tile).item.id === tileId) {
+      .find((c) => (c.item as Tile).item.id === tileId)
-        if (endOfGesture) {
+      ?.start(
-          return {
+        endOfGesture
+          ? {
               scale: 1,
               zIndex: 1,
               shadow: 1,
@@ -296,9 +297,8 @@ export const NewVideoGrid: FC<Props> = ({
               // Allow the tile's position to settle before pushing its
               // z-index back down
               delay: (key) => (key === "zIndex" ? 500 : 0),
-          };
+            }
-        } else {
+          : {
-          return {
               scale: 1.1,
               zIndex: 2,
               shadow: 15,
@@ -307,12 +307,8 @@ export const NewVideoGrid: FC<Props> = ({
               immediate:
                 disableAnimations ||
                 ((key) => key === "zIndex" || key === "x" || key === "y"),
-          };
             }
-      } else {
+      );
-        return {};
-      }
-    });
 
     const overTile = tiles.find(
       (t) =>