Async Autocomplete

An async autocomplete waits for a pause in typing, searches a remote-style source, and prevents old responses from replacing current results. Build that flow in React using the deterministic searchAPI helper already in App.tsx; it performs no real network requests.

Signature

Complete the default App component. Use React state for the visible query, loading, error, results, and open state; use an effect plus a ref-held request token for timing and ordering.

Examples

• Type ap quickly: loading appears immediately, only one search begins after 300ms of quiet, and matching fruit appears about 400ms later.
• Type ap, let its search start, then type app: the ap response must not update the current app UI.
• Type error: the status becomes Search is unavailable. Try again. and no result list opens.
• Select Apple: the input becomes Apple, transient state clears, and the popup closes without another search.

Notes

• Blank input — clear results, loading, and errors; invalidate in-flight work.
• Loading timing — show it as soon as a nonblank edit is accepted, including the debounce period.
• No matches — show this only after a successful empty result, never for a failure.
• Accessibility — preserve the label, combobox/listbox relationship, live status, busy/expanded state, and button-based options.
• Starter scope — keep the fixed fruit data and mock helper; implement the TODO without adding a real API.