From 0404799cdf35e1a891652b1c72e6e544bad8e201 Mon Sep 17 00:00:00 2001
From: "J. Lewis" <6710419+lewxdev@users.noreply.github.com>
Date: Sun, 11 Aug 2024 12:11:27 -0400
Subject: [PATCH 1/3] feat: add transition to virtualized list

---
 app/components/fade.tsx  | 21 +++++++++++++++++++++
 app/components/field.tsx | 30 ++++++++++++++++--------------
 app/components/plot.tsx  |  2 +-
 3 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 app/components/fade.tsx

diff --git a/app/components/fade.tsx b/app/components/fade.tsx
new file mode 100644
index 0000000..3643dcb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/components/field.tsx b/app/components/field.tsx
index b9c5c39..e062199 100644
--- a/app/components/field.tsx
+++ b/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,8 +20,8 @@ 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,
@@ -49,22 +50,23 @@ 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;
             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 top-0 left-0"
+                  index={index}
+                  state={plots[index]!}
+                  style={{
+                    height: virtualRow.size,
+                    width: virtualColumn.size,
+                    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
+                  }}
+                />
+              </Fade>
             );
           }),
         )}
diff --git a/app/components/plot.tsx b/app/components/plot.tsx
index 40efd98..059446a 100644
--- a/app/components/plot.tsx
+++ b/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";

From 333743ff9e50ae9c97ffe390b8ba8e233ef9812a Mon Sep 17 00:00:00 2001
From: "J. Lewis" <6710419+lewxdev@users.noreply.github.com>
Date: Mon, 12 Aug 2024 09:13:38 -0400
Subject: [PATCH 2/3] refactor: cleanup style strategy

---
 app/components/field.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/app/components/field.tsx b/app/components/field.tsx
index e062199..833faa0 100644
--- a/app/components/field.tsx
+++ b/app/components/field.tsx
@@ -52,19 +52,17 @@ export function Field() {
       >
         {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 (
               // todo: add room/mode to key
               <Fade key={`${size}:${index}`}>
                 <Plot
-                  className="absolute top-0 left-0"
+                  className="absolute"
                   index={index}
                   state={plots[index]!}
-                  style={{
-                    height: virtualRow.size,
-                    width: virtualColumn.size,
-                    transform: `translateX(${virtualColumn.start}px) translateY(${virtualRow.start}px)`,
-                  }}
+                  style={{ height, width, top, left }}
                 />
               </Fade>
             );

From b7807776434c412668ef79ad03807e899cf771dc Mon Sep 17 00:00:00 2001
From: "J. Lewis" <6710419+lewxdev@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:21:19 -0400
Subject: [PATCH 3/3] fix: jank horizontal scroll

---
 app/components/field.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/field.tsx b/app/components/field.tsx
index 833faa0..089e766 100644
--- a/app/components/field.tsx
+++ b/app/components/field.tsx
@@ -24,7 +24,10 @@ export function Field() {
     getScrollElement: () => parentRef.current,
   });
   const columnVirtualizer = useVirtualizer({
-    ...rowVirtualizer.options,
+    count: size,
+    gap: GAP_SIZE * 16,
+    estimateSize: () => GRID_SIZE * 16,
+    getScrollElement: () => parentRef.current,
     horizontal: true,
   });