Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/dip/cmdk/llms.txt

Use this file to discover all available pages before exploring further.

Command.Loading renders a role="progressbar" element while asynchronous command items are loading. Conditionally render it based on your loading state — when items are ready, stop rendering it and let Command.Empty or your items take over. 
import { Command } from 'cmdk'

export function CommandMenu() {
  const [loading, setLoading] = React.useState(false)

  return (
    <Command>
      <Command.Input />
      <Command.List>
        {loading && <Command.Loading>Fetching results...</Command.Loading>}
        <Command.Empty>No results found.</Command.Empty>
        <Command.Item>Result 1</Command.Item>
      </Command.List>
    </Command>
  )
}
Data attribute: [cmdk-loading]

​
Props

​
progress
number
A number between 0 and 100 representing the estimated loading progress. Set as aria-valuenow on the progressbar element. Optional — omit it if you don’t have a meaningful progress value and just want to indicate indeterminate loading.
​
label
string
default:"Loading..."
Accessible label for the progressbar. Set as aria-label on the element. Not shown visually. Customize it to describe what is being loaded.

​
Examples

​
Conditional rendering with loading state

Render Command.Loading only while fetching, then let normal items or Command.Empty take over: 
const [loading, setLoading] = React.useState(false)
const [items, setItems] = React.useState<string[]>([])

React.useEffect(() => {
  setLoading(true)
  fetchCommands().then((results) => {
    setItems(results)
    setLoading(false)
  })
}, [])

return (
  <Command>
    <Command.Input />
    <Command.List>
      {loading && <Command.Loading label="Fetching commands...">Hang on…</Command.Loading>}
      {items.map((item) => (
        <Command.Item key={item} value={item}>
          {item}
        </Command.Item>
      ))}
    </Command.List>
  </Command>
)

​
Determinate progress bar

When you can estimate loading progress, pass a progress value to give screen readers a percentage: 
const [progress, setProgress] = React.useState(0)

return (
  <Command>
    <Command.Input />
    <Command.List>
      {progress < 100 && (
        <Command.Loading
          progress={progress}
          label={`Loading results, ${progress}% complete`}
        >
          <div
            style={{
              height: 2,
              background: 'var(--primary)',
              width: `${progress}%`,
              transition: 'width 150ms ease',
            }}
          />
        </Command.Loading>
      )}
      <Command.Item>Result A</Command.Item>
    </Command.List>
  </Command>
)

​
Styling

[cmdk-loading] {
  padding: 16px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 0.875rem;
}
Always render Command.Empty alongside Command.Loading. Once loading finishes and items are set, if the filtered count drops to zero, Command.Empty will appear automatically.