perf: defer asset picker search filtering

packages/interwovenkit-react/src/components/form/AssetOptions.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx"
-import { useState } from "react"
+import { useDeferredValue, useMemo, useState } from "react"
 import { formatAmount } from "@initia/utils"
 import { formatValue } from "@/lib/format"
 import Image from "../Image"
@@ -12,6 +12,8 @@ import styles from "./AssetOptions.module.css"
 
 import type { ReactNode } from "react"
 
+const DEFAULT_SEARCH_KEYS: Array<keyof BaseAsset> = ["symbol"]
+
 interface Props {
   assets: BaseAsset[]
   onSelect: (denom: string) => void
@@ -31,13 +33,17 @@ const AssetOptions = (props: Props) => {
     assets,
     onSelect,
     renderAsset = (asset, children) => children(asset),
-    searchKeys = ["symbol"],
+    searchKeys = DEFAULT_SEARCH_KEYS,
     placeholder = "Search by symbol",
     emptyMessage = "No assets",
     listClassName,
   } = props
   const [search, setSearch] = useState("")
-  const filteredAssets = filterBySearch(searchKeys, search, assets)
+  const deferredSearch = useDeferredValue(search)
+  const filteredAssets = useMemo(
+    () => filterBySearch(searchKeys, deferredSearch, assets),
+    [searchKeys, deferredSearch, assets],
+  )
 
   return (
     <div className={styles.container}>

packages/interwovenkit-react/src/components/form/search.ts

@@ -1,8 +1,10 @@
-import { any, includes } from "ramda"
-
 export function filterBySearch<T>(fields: Array<keyof T>, search: string, data: T[]): T[] {
-  return data.filter((item) => {
-    const values = fields.map((field) => item[field]).map((val) => String(val ?? "").toLowerCase())
-    return any(includes(search.toLowerCase()), values)
-  })
+  const query = search.toLowerCase()
+  return data.filter((item) =>
+    fields.some((field) =>
+      String(item[field] ?? "")
+        .toLowerCase()
+        .includes(query),
+    ),
+  )
 }