WIP: Improve painting performance with react-virtual

package.json

@@ -26,6 +26,7 @@
     "@remix-run/react": "^1.13.0",
     "@remix-run/serve": "^1.13.0",
     "@remix-run/server-runtime": "^1.13.0",
+    "@tanstack/react-virtual": "3.0.0-beta.49",
     "@types/node": "^18.14.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -39,6 +40,7 @@
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-is": "^18.2.0",
+    "remeda": "^1.6.2",
     "styled-components": "5.3.6",
     "typescript": "^4.9.5"
   },
@@ -47,6 +49,7 @@
     "dev": "NODE_ENV=development netlify dev"
   },
   "devDependencies": {
+    "@types/lodash.throttle": "^4.1.7",
     "@types/styled-components": "^5.1.26",
     "eslint": "^8.34.0",
     "eslint-config-wesbos": "^3.2.3",

src/routes/index.tsx

@@ -1,27 +1,165 @@
-import { useLoaderData, useParams } from '@remix-run/react';
-import { json, LoaderArgs } from '@remix-run/server-runtime';
-import React, { useContext } from 'react';
-import Topics from '../components/Topics';
-import BackToTop from '../components/BackToTop';
-import Person from '../components/Person';
-import { getPeople } from 'src/util/stats';
+import { useLoaderData } from "@remix-run/react";
+import { LoaderArgs } from "@remix-run/server-runtime";
+import Topics from "../components/Topics";
+import BackToTop from "../components/BackToTop";
+import Person from "../components/Person";
+import { getPeople } from "src/util/stats";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import { chunk } from "remeda";
+
+const GRID_GAP = 50;
+const PERSON_MIN_WIDTH = 350;
+const PERSON_ESTIMATE_HEIGHT = 560;
 
 export async function loader({ params }: LoaderArgs) {
   const people = getPeople(params.tag);
-  return {people};
+  return { people };
 }
 
 export default function Index() {
-  const { people } = useLoaderData();
+  const isMounted = useIsMounted();
+
   return (
     <>
       <Topics />
-      <div className="People">
-        {people.map(person => (
-          <Person key={person.name} person={person} />
-        ))}
-      </div>
+      {isMounted ? <PeopleGridClient /> : <PeopleGridServer />}
       <BackToTop />
     </>
   );
 }
+
+function PeopleGridClient() {
+  const { people } = useLoaderData<typeof loader>();
+
+  const GridContainerRef = useRef<HTMLDivElement>(null);
+  const GridContainerOffsetTopRef = useRef<number>(0);
+  const GridContainerOffsetWidthRef = useRef<number>(0);
+
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      if (GridContainerRef.current) {
+        GridContainerOffsetTopRef.current = GridContainerRef.current.offsetTop;
+        GridContainerOffsetWidthRef.current =
+          GridContainerRef.current.offsetWidth;
+      }
+    };
+
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const peoplePerRow = GridContainerOffsetWidthRef.current
+    ? Math.floor(
+        (GridContainerOffsetWidthRef.current + GRID_GAP) /
+          (PERSON_MIN_WIDTH + GRID_GAP)
+      )
+    : 1;
+
+  const rowsOfPeople = chunk(people, peoplePerRow);
+
+  const rowVirtualizer = useWindowVirtualizer({
+    count: rowsOfPeople.length,
+    estimateSize: () => PERSON_ESTIMATE_HEIGHT,
+    overscan: 5,
+    scrollMargin: GridContainerOffsetTopRef.current,
+  });
+
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
+  return (
+    <div ref={GridContainerRef}>
+      <div
+        style={{
+          height: rowVirtualizer.getTotalSize(),
+          width: "100%",
+          position: "relative",
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            transform: `translateY(${
+              virtualRows[0].start - rowVirtualizer.options.scrollMargin
+            }px)`,
+          }}
+        >
+          {virtualRows.map((virtualRow) => {
+            const people = rowsOfPeople[virtualRow.index];
+
+            return (
+              <div
+                key={`row-${virtualRow.index}-${people[0].name}`}
+                data-index={virtualRow.index}
+                ref={rowVirtualizer.measureElement}
+              >
+                <div
+                  style={{
+                    display: "grid",
+                    gridTemplateColumns: `repeat(auto-fill, minmax(${PERSON_MIN_WIDTH}px, 1fr))`,
+                    gridGap: `${GRID_GAP}px`,
+                    paddingTop:
+                      virtualRow.index === 0 ? `0px` : `${GRID_GAP}px`,
+                  }}
+                >
+                  {people.map((person) => (
+                    <div
+                      key={person.name}
+                      ref={rowVirtualizer.measureElement}
+                      style={{
+                        display: "grid",
+                      }}
+                    >
+                      <Person person={person} />
+                    </div>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PeopleGridServer() {
+  const { people } = useLoaderData<typeof loader>();
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, minmax(${PERSON_MIN_WIDTH}px, 1fr))`,
+        gridGap: `${GRID_GAP}px`,
+      }}
+    >
+      {people.slice(0, 30).map((person) => (
+        <Person key={person.name} person={person} />
+      ))}
+      {/* to prevent the huge scrollbar jump if we were rendering a lot more people on the client than the server */}
+      {people.slice(30).map((person) => (
+        <div
+          key={person.name}
+          style={{
+            height: PERSON_ESTIMATE_HEIGHT,
+          }}
+        ></div>
+      ))}
+    </div>
+  );
+}
+
+function useIsMounted() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  return isMounted;
+}

src/styles.css

@@ -278,13 +278,3 @@ body::-webkit-scrollbar-thumb {
   padding: 0 3rem;
   margin: 5rem auto;
 }
-
-.People {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
-  grid-gap: 5rem;
-
-  @media all and (max-width: 400px) {
-    grid-template-columns: 1fr;
-  }
-}