Add cache for tailwind-variants

app/gui/src/dashboard/components/dashboard/AssetRow.tsx

@@ -408,7 +408,7 @@ export function RealAssetRow(props: RealAssetRowProps) {
               }
             }}
             className={tailwindMerge.twMerge(
-              'h-table-row rounded-full transition-all ease-in-out rounded-rows-child [contain-intrinsic-size:44px] [content-visibility:auto]',
+              'h-table-row rounded-full transition-all ease-in-out rounded-rows-child',
               visibility,
               (isDraggedOver || isSelected) && 'selected',
             )}

app/gui/src/dashboard/components/dashboard/column/columnUtils.ts

@@ -55,7 +55,7 @@ export const COLUMN_SHOW_TEXT_ID: Readonly<Record<Column, text.TextId>> = {
 } satisfies { [C in Column]: `${C}ColumnShow` }
 
 const COLUMN_CSS_CLASSES =
-  'max-w-96 text-left bg-clip-padding last:border-r-0 last:rounded-r-full last:w-full'
+  'max-w-96 text-left bg-clip-padding last:border-r-0 last:rounded-r-full last:w-full [contain-intrinsic-size:44px] [content-visibility:auto]'
 const NORMAL_COLUMN_CSS_CLASSES = `px-cell-x py ${COLUMN_CSS_CLASSES}`
 
 /** CSS classes for every column. */

app/gui/src/dashboard/utilities/LruCache.ts

@@ -0,0 +1,48 @@
+/** @file A simple LRU cache. */
+/**
+ * A simple LRU cache.
+ */
+export class LRUCache<K, V> {
+  private readonly cache: Map<K, V>
+  private readonly maxSize: number
+
+  /**
+   * Create a new LRU cache.
+   */
+  constructor(maxSize: number) {
+    this.cache = new Map()
+    this.maxSize = maxSize
+  }
+
+  /**
+   * Get a value from the cache.
+   */
+  get(key: K): V | undefined {
+    const value = this.cache.get(key)
+    if (value != null) {
+      this.cache.delete(key)
+      this.cache.set(key, value)
+    }
+    return value
+  }
+
+  /**
+   * Set a value in the cache.
+   */
+  set(key: K, value: V) {
+    if (this.cache.size >= this.maxSize) {
+      const oldestKey = this.cache.keys().next().value
+      if (oldestKey != null) {
+        this.cache.delete(oldestKey)
+      }
+    }
+    this.cache.set(key, value)
+  }
+
+  /**
+   * Clear the cache.
+   */
+  clear() {
+    this.cache.clear()
+  }
+}

app/gui/src/dashboard/utilities/tailwindVariants.ts

@@ -3,12 +3,80 @@ import type { OmitUndefined } from 'tailwind-variants'
 import { createTV } from 'tailwind-variants'
 
 import { TAILWIND_MERGE_CONFIG } from '#/utilities/tailwindMerge'
+import { LRUCache } from './LruCache'
 
 export * from 'tailwind-variants'
 
+const MAX_CACHE_SIZE = 256
+
+// eslint-disable-next-line no-restricted-syntax
+const tvConstructor = createTV({ twMergeConfig: TAILWIND_MERGE_CONFIG })
+
 // This is a function, even though it does not contain function syntax.
 // eslint-disable-next-line no-restricted-syntax
-export const tv = createTV({ twMergeConfig: TAILWIND_MERGE_CONFIG })
+export const tv = function tvWithLRU(construct: Parameters<typeof tvConstructor>[0]) {
+  const cache = new LRUCache<string, unknown>(MAX_CACHE_SIZE)
+  /**
+   * Get a cache key for a given set of arguments.
+   */
+  function getCacheKey(props: Parameters<typeof baseVariants>[0]) {
+    return JSON.stringify(props)
+  }
+
+  const baseVariants = tvConstructor(construct)
+
+  // We use proxy here because `tailwind-variants` returns a function with extra properties.
+  // and we want to preserve these properties.
+  const withLRU = new Proxy(baseVariants, {
+    apply: (target, _thisArg, argArray: unknown[]) => {
+      const cacheKey = getCacheKey(argArray)
+      const cached = cache.get(cacheKey)
+
+      if (cached != null) {
+        return cached
+      }
+
+      const result: unknown = target(...argArray)
+
+      if (typeof result === 'object' && result != null) {
+        for (const slot in result) {
+          // eslint-disable-next-line no-restricted-syntax
+          const value = result[slot as keyof typeof result]
+
+          if (typeof value === 'function') {
+            const slotCachePrefix = slot + cacheKey
+            /**
+             * Wrap a slot function with a cache.
+             */
+            // @ts-expect-error - This is a valid assignment.
+            result[slot] = function withSlotCache(props: Parameters<typeof value>[0]) {
+              const slotCacheKey = slotCachePrefix + getCacheKey(props)
+              const slotCache = cache.get(slotCacheKey)
+
+              if (slotCache != null) {
+                return slotCache
+              }
+
+              // @ts-expect-error - This is a valid assignment.
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+              const classes = value(props)
+
+              cache.set(slotCacheKey, classes)
+
+              // eslint-disable-next-line @typescript-eslint/no-unsafe-return
+              return classes
+            }
+          }
+        }
+      }
+
+      cache.set(cacheKey, result)
+      return result
+    },
+  })
+
+  return withLRU
+} as typeof tvConstructor
 
 /** Extract function signatures from a type. */
 export type ExtractFunction<T> =