perf(studio): add virtualized list for facet items

packages/pinorama-studio/package.json

@@ -6,10 +6,7 @@
   "bin": {
     "pinorama": "./cli.mjs"
   },
-  "files": [
-    "dist",
-    "cli.mjs"
-  ],
+  "files": ["dist", "cli.mjs"],
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

packages/pinorama-studio/src/modules/log-explorer/components/log-filters/components/facet-body.tsx

@@ -1,7 +1,9 @@
 import { FacetItem } from "./facet-item"
 
 import type { AnySchema } from "@orama/orama"
+import { useVirtualizer } from "@tanstack/react-virtual"
 import type { IntrospectionFacet, PinoramaIntrospection } from "pinorama-types"
+import { useRef } from "react"
 import type { FacetValue, SearchFilters } from "../types"
 
 type FacetBodyProps = {
@@ -14,22 +16,44 @@ type FacetBodyProps = {
 }
 
 export function FacetBody(props: FacetBodyProps) {
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  const rowVirtualizer = useVirtualizer({
+    count: props.values.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 38
+  })
+
   return (
-    <div className="border box-border rounded-md overflow-auto max-h-[241px] my-2">
-      {props.values?.map(({ value, count }) => {
-        return (
-          <FacetItem
-            key={value}
-            introspection={props.introspection}
-            name={props.name}
-            type={props.type}
-            value={value}
-            count={count}
-            filters={props.filters}
-            onFiltersChange={props.onFiltersChange}
-          />
-        )
-      })}
+    <div
+      ref={parentRef}
+      className="border box-border rounded-md overflow-auto max-h-[241px] my-2"
+    >
+      <div
+        className="w-full relative"
+        style={{ height: `${rowVirtualizer.getTotalSize()}px` }}
+      >
+        {rowVirtualizer.getVirtualItems().map((virtualItem) => (
+          <div
+            key={virtualItem.key}
+            className="absolute top-0 left-0 w-full"
+            style={{
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`
+            }}
+          >
+            <FacetItem
+              introspection={props.introspection}
+              name={props.name}
+              type={props.type}
+              value={props.values[virtualItem.index].value}
+              count={props.values[virtualItem.index].count}
+              filters={props.filters}
+              onFiltersChange={props.onFiltersChange}
+            />
+          </div>
+        ))}
+      </div>
     </div>
   )
 }