Disable animations in grid if there are too many displays

For performance reasons
ProjectLighthouseCAU · Sep 27, 2024 · 6493e6f · 6493e6f
1 parent cd7515b
commit 6493e6f
Showing 1 changed file with 34 additions and 21 deletions.
diff --git a/src/screens/home/displays/DisplayGrid.tsx b/src/screens/home/displays/DisplayGrid.tsx
@@ -17,29 +17,42 @@ export function DisplayGrid({
   searchQuery,
   displayWidth,
 }: DisplayGridProps) {
+  // Filter the models case-insensitively by the search query
+  const filteredModels = [...userModels.entries()]
+    .filter(([username]) =>
+      username.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+    .sort(([u1], [u2]) => u1.localeCompare(u2));
+
+  // Disable animations automatically if there are too many displays for
+  // performance reasons. Unfortunately we can't seem to change the layoutId
+  // after the component has mounted, so even if a user filters down the view
+  // the displays might not animate: https://github.com/framer/motion/issues/2075
+  const animationsEnabled = filteredModels.length <= 512;
+
   return (
     <div className="flex flex-wrap gap-4 justify-center">
-      {[...userModels.entries()]
-        .filter(([username]) =>
-          username.toLowerCase().includes(searchQuery.toLowerCase())
-        )
-        .sort(([u1], [u2]) => u1.localeCompare(u2))
-        .map(([username, userModel]) => (
-          <Link to={username} key={username}>
-            <InView>
-              {({ inView, ref }) => (
-                <motion.div ref={ref} layoutId={displayLayoutId(username)}>
-                  <DisplayCard
-                    username={username}
-                    frame={userModel.frame}
-                    displayWidth={displayWidth}
-                    isSkeleton={!inView}
-                  />
-                </motion.div>
-              )}
-            </InView>
-          </Link>
-        ))}
+      {filteredModels.map(([username, userModel]) => (
+        <Link to={username} key={username}>
+          <InView>
+            {({ inView, ref }) => (
+              <motion.div
+                ref={ref}
+                {...(animationsEnabled
+                  ? { layoutId: displayLayoutId(username) }
+                  : {})}
+              >
+                <DisplayCard
+                  username={username}
+                  frame={userModel.frame}
+                  displayWidth={displayWidth}
+                  isSkeleton={!inView}
+                />
+              </motion.div>
+            )}
+          </InView>
+        </Link>
+      ))}
     </div>
   );
 }