Async Select

import { Select, createListCollection } from '@ark-ui/react/select'
import { ChevronsUpDownIcon } from 'lucide-react'
import { useEffect, useMemo, useState } from 'react'
import { data } from './data'

interface Pokemon {
  name: string
  url: string
}

export const Example = () => {
  const [items, setItems] = useState<Pokemon[]>([])

  useEffect(() => {
    const timer = setTimeout(() => {
      setItems(data.results)
    }, 200)

    return () => clearTimeout(timer)
  }, [])

  const collection = useMemo(
    () =>
      createListCollection({
        items,
        itemToString: (item) => item.name,
        itemToValue: (item) => item.name,
      }),
    [items],
  )

  return (
    <Select.Root<Pokemon> collection={collection}>
      <Select.Label>Pokemon</Select.Label>
      <Select.Control>
        <Select.Trigger>
          <Select.ValueText placeholder="Select a Pokemon" />
          <ChevronsUpDownIcon />
        </Select.Trigger>
      </Select.Control>
      <Select.Positioner>
        <Select.Content>
          {items.map((item) => (
            <Select.Item key={item.url} item={item}>
              <Select.ItemText>{item.name}</Select.ItemText>
              <Select.ItemIndicator>✓</Select.ItemIndicator>
            </Select.Item>
          ))}
        </Select.Content>
      </Select.Positioner>
      <Select.HiddenSelect />
    </Select.Root>
  )
}