feat: add rendering virtualization

app/components/field.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { HEADER_HEIGHT } from "@/components/header";
 import { Plot } from "@/components/plot";
 import { useSocket } from "@/hooks/use-socket";
@@ -14,25 +15,60 @@ export function Field() {
   const [plots] = useSocketEvent("update");
   const size = plots ? Math.sqrt(plots.length) : 0;
 
+  const parentRef = useRef<HTMLDivElement>(null);
+  const rowVirtualizer = useVirtualizer({
+    count: size,
+    gap: GAP_SIZE * 16,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => GRID_SIZE * 16,
+  });
+  const columnVirtualizer = useVirtualizer({
+    ...rowVirtualizer.options,
+    horizontal: true,
+  });
+
   useEffect(() => {
     document.documentElement.style.setProperty(
       "--field-size",
       size ? `${size * GRID_SIZE + (size - 1) * GAP_SIZE}rem` : "100%",
     );
   }, [size]);
 
-  return (
+  // todo: add skeleton loader
+  return !plots ? null : (
     <div
-      className="grid max-w-full select-none overflow-auto bg-white"
+      className="max-w-full select-none overflow-auto bg-white"
       onContextMenu={(event) => event.preventDefault()}
-      style={{
-        gap: `${GAP_SIZE}rem`,
-        gridTemplateColumns: `repeat(${size}, ${GRID_SIZE}rem)`,
-        gridTemplateRows: `repeat(${size}, ${GRID_SIZE}rem)`,
-        maxHeight: `calc(100dvh - ${HEADER_HEIGHT}px)`,
-      }}
+      ref={parentRef}
+      style={{ maxHeight: `calc(100dvh - ${HEADER_HEIGHT}px)` }}
     >
-      {plots?.map((state, index) => <Plot {...{ state, index }} key={index} />)}
+      <div
+        className="relative"
+        style={{
+          height: rowVirtualizer.getTotalSize(),
+          width: columnVirtualizer.getTotalSize(),
+        }}
+      >
+        {rowVirtualizer.getVirtualItems().map((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)`,
+                }}
+              />
+            );
+          }),
+        )}
+      </div>
     </div>
   );
 }

app/components/plot.tsx

@@ -3,17 +3,18 @@ import { socket } from "@/socket";
 import { tw } from "@/utils";
 import type { PlotState } from "@/utils/game";
 
-type Props = {
+type Props = React.HTMLAttributes<HTMLDivElement> & {
   index: number;
   state: PlotState;
 };
 
-export function Plot({ index, state }: Props) {
+export function Plot({ className, index, state, ...props }: Props) {
   return (
     <div
       className={clsx(
         "flex items-center justify-center text-xl font-bold",
         classMap.get(state),
+        className,
       )}
       onClick={() => {
         if (state === "unknown") {
@@ -26,6 +27,7 @@ export function Plot({ index, state }: Props) {
           socket.emit("flag", index);
         }
       }}
+      {...props}
     >
       {textMap.has(state) ? textMap.get(state) : state}
     </div>

package.json

@@ -10,6 +10,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.8.4",
     "clsx": "^2.1.1",
     "esrun": "^3.2.26",
     "geist": "^1.3.1",