# Command: Async results

> Set `shouldFilter={false}` and render the results you fetch. `<CommandLoading />` waits 150 ms before it appears and then stays at least 300 ms, so fast responses never flash a spinner. Try both latencies.

Example: https://hextaui.com/docs/command/examples/async
Component docs: https://hextaui.com/docs/command.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/command-async.json
```

This adds `components/examples/command/async.tsx` with the Command component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/command/async.tsx"
"use client"

import * as React from "react"
import { IconUser } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandLoading,
  useCommandLoading,
} from "@/components/ui/command"

const people = [
  "Ada Lovelace",
  "Alan Turing",
  "Grace Hopper",
  "Katherine Johnson",
  "Linus Torvalds",
  "Margaret Hamilton",
  "Tim Berners-Lee",
]

export function CommandAsync() {
  const [query, setQuery] = React.useState("")
  const [results, setResults] = React.useState(people)
  const [loading, setLoading] = React.useState(false)
  const [latency, setLatency] = React.useState(700)
  const pending = useCommandLoading(loading)
  const timerRef = React.useRef<ReturnType<typeof setTimeout>>(undefined)

  React.useEffect(() => () => clearTimeout(timerRef.current), [])

  const search = (nextQuery: string, nextLatency: number) => {
    clearTimeout(timerRef.current)
    setLoading(true)
    timerRef.current = setTimeout(() => {
      setResults(
        people.filter((person) =>
          person.toLowerCase().includes(nextQuery.toLowerCase())
        )
      )
      setLoading(false)
    }, nextLatency)
  }

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex gap-2">
        {[80, 700].map((ms) => (
          <Button
            key={ms}
            size="sm"
            variant={latency === ms ? "secondary" : "outline"}
            onClick={() => {
              setLatency(ms)
              search(query, ms)
            }}
          >
            {ms} ms
          </Button>
        ))}
      </div>
      <Command shouldFilter={false} highlight>
        <CommandInput
          placeholder="Search people…"
          value={query}
          onValueChange={(next) => {
            setQuery(next)
            search(next, latency)
          }}
        />
        <CommandList>
          <CommandLoading loading={loading}>Searching…</CommandLoading>
          <CommandEmpty>
            {(value) => `No people match “${value}”.`}
          </CommandEmpty>
          {pending ? null : (
            <CommandGroup heading="People">
              {results.map((person) => (
                <CommandItem key={person}>
                  <IconUser />
                  {person}
                </CommandItem>
              ))}
            </CommandGroup>
          )}
        </CommandList>
      </Command>
    </div>
  )
}
```

## Props in this example

### Command

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `highlight` | `boolean` | `false` | Highlights the matched letters in each item and dims the rest. |
| `shouldFilter` | `boolean` | `true` | Set to false to filter and sort the items yourself, for example when results come from a server. |

### CommandInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – | Controlled search text. |
| `onValueChange` | `(search: string) => void` | – |  |
| `placeholder` | `string` | – |  |

### CommandLoading

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `loading` | `boolean` | `true` |  |

### CommandGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | – |  |

## More Command examples

- [Basic](https://hextaui.com/docs/command/examples/basic.md)
- [Dialog](https://hextaui.com/docs/command/examples/dialog.md)
- [Pages](https://hextaui.com/docs/command/examples/pages.md)
- [Scrollable](https://hextaui.com/docs/command/examples/scrollable.md)
- [Long content](https://hextaui.com/docs/command/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/command/examples/rtl.md)