Don't use FLIP for large grids (#655)

Signed-off-by: Carl Gieringer <78054+carlgieringer@users.noreply.github.com>

premiser-ui/src/components/itemGrid/ItemGrid.tsx

@@ -1,5 +1,5 @@
 import { ComponentId } from "@/types";
-import { GridCell, GridCellProps } from "@react-md/utils";
+import { Grid, GridCell, GridCellProps } from "@react-md/utils";
 import React from "react";
 
 import { FlipGrid } from "@/components/layout/FlipGrid";
@@ -17,6 +17,25 @@ export interface ItemGridProps {
  * to show.
  */
 export function ItemGrid({ id, items, itemColSpans, ...rest }: ItemGridProps) {
+  if (items.length > 64) {
+    // If there are a lot of items, the list takes a long time to render. Also
+    // there are weird behaviors when updating the list, like floating items
+    // above the list's normal position. So we use a regular grid for large
+    // lists.
+    //
+    // TODO(#221) see if there are more performant FLIP libraries
+    return (
+      <Grid id={id} {...rest}>
+        {items?.map((item) => {
+          return (
+            <GridCell key={item.key} {...itemColSpans}>
+              {item}
+            </GridCell>
+          );
+        })}
+      </Grid>
+    );
+  }
   return (
     <FlipGrid id={id} {...rest}>
       {items?.map((item) => {