useDebounce

import { useDebounce } from '@parto-system-design/ui'

function SearchComponent() {
  const [query, setQuery] = React.useState('')
  const debouncedQuery = useDebounce(query, 300)

  React.useEffect(() => {
    if (debouncedQuery) {
      // فقط بعد از 300ms توقف تایپ اجرا می‌شود
      fetchSearchResults(debouncedQuery)
    }
  }, [debouncedQuery])

  return <SearchInput value={query} onChange={(e) => setQuery(e.target.value)} placeholder="جستجو..." />
}

function LiveSearch() {
  const [query, setQuery] = React.useState('')
  const [results, setResults] = React.useState([])
  const [isLoading, setIsLoading] = React.useState(false)
  const debouncedQuery = useDebounce(query, 300)

  // نشانگر بارگذاری فوری — بدون debounce
  const isTyping = query !== debouncedQuery

  React.useEffect(() => {
    if (!debouncedQuery) {
      setResults([])
      return
    }

    setIsLoading(true)
    searchAPI(debouncedQuery)
      .then(setResults)
      .finally(() => setIsLoading(false))
  }, [debouncedQuery])

  return (
    <div>
      <SearchInput value={query} onChange={(e) => setQuery(e.target.value)} />
      {(isTyping || isLoading) && <Spinner className="size-4" />}
      {results.map((r) => (
        <div key={r.id}>{r.title}</div>
      ))}
    </div>
  )
}