feat: add transition to virtualized list

app/components/fade.tsx

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+import clsx from "clsx/lite";
+
+export function Fade({ children }: React.PropsWithChildren) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        "transition-opacity duration-500 ease-in-out",
+        isVisible ? "opacity-100" : "opacity-0",
+      )}
+    >
+      {children}
+    </div>
+  );
+}

app/components/field.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useRef } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
+import { Fade } from "@/components/fade";
 import { HEADER_HEIGHT } from "@/components/header";
 import { Plot } from "@/components/plot";
 import { useSocket } from "@/hooks/use-socket";
@@ -19,11 +20,14 @@ export function Field() {
   const rowVirtualizer = useVirtualizer({
     count: size,
     gap: GAP_SIZE * 16,
-    getScrollElement: () => parentRef.current,
     estimateSize: () => GRID_SIZE * 16,
+    getScrollElement: () => parentRef.current,
   });
   const columnVirtualizer = useVirtualizer({
-    ...rowVirtualizer.options,
+    count: size,
+    gap: GAP_SIZE * 16,
+    estimateSize: () => GRID_SIZE * 16,
+    getScrollElement: () => parentRef.current,
     horizontal: true,
   });
 
@@ -49,22 +53,21 @@ export function Field() {
           width: columnVirtualizer.getTotalSize(),
         }}
       >
-        {rowVirtualizer.getVirtualItems().map((virtualRow) =>
+        {rowVirtualizer.getVirtualItems().flatMap((virtualRow) =>
           columnVirtualizer.getVirtualItems().map((virtualColumn) => {
-            const index = virtualRow.index * size + virtualColumn.index;
+            const { index: y, size: height, start: top } = virtualRow;
+            const { index: x, size: width, start: left } = virtualColumn;
+            const index = y * size + x;
             return (
-              <Plot
-                index={index}
-                state={plots[index]!}
-                // todo: add room/mode to key
-                key={`${plots.length}:${index}`}
-                className="absolute top-0 left-0"
-                style={{
-                  width: virtualColumn.size,
-                  height: virtualRow.size,
-                  transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
-                }}
-              />
+              // todo: add room/mode to key
+              <Fade key={`${size}:${index}`}>
+                <Plot
+                  className="absolute"
+                  index={index}
+                  state={plots[index]!}
+                  style={{ height, width, top, left }}
+                />
+              </Fade>
             );
           }),
         )}

app/components/plot.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import clsx from "clsx";
+import clsx from "clsx/lite";
 import { useLongPress } from "@/hooks/use-long-press";
 import { socket } from "@/socket";
 import { tw } from "@/utils";