Improve the performance of dragging tiles in the large grid

By only updating the one spring of the tile that's being interacted with
This commit is contained in:
Robin Townsend 2023-06-16 10:20:24 -04:00
parent 5510719fb2
commit f4f454f58e

View file

@ -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) => {
if ((controller.item as Tile).item.id === tileId) {
if (endOfGesture) {
return {
springRef.current
.find((c) => (c.item as Tile).item.id === tileId)
?.start(
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) =>