[Feature]: inquirer/search - debounce support

[tanepiper]

Description:

It would be good to have a native debouce value for the search module. Currently I am doing this to handle it:

public async search() {
  console.log(kleur.bold('Press Ctrl+C to exit the search'));
  const answer = await search<string>({
    pageSize: 5,
    message: 'Search for an Product Name',
    theme: {
      helpMode: 'always',
      prefix: '🔍',
    },
    source: async (input: string, { signal }: { signal: AbortSignal }) => {
      if (!input) {
        return [];
      }

      // Clear the previous timeout if there's any
      if (this.debounceTimeout) {
        clearTimeout(this.debounceTimeout);
      }

      // Return a promise that resolves after the debounce period
      return new Promise((resolve) => {
        this.debounceTimeout = setTimeout(async () => {
          try {
            const products = await this.client.itemsSearch(input, signal);

            const results =
              products?.map(({ content }, index) => ({
                name: content.name,
                value: content.id,
                description: `Record ${index + 1} / ${products.length} | ${content.id}) `
              })) || [];
            // Would have added this for pagination
            //results.push({
            //  name: 'Next Results',
            //  value: null,
            //  description: 'Select to load the next page',
            //  disabled: false,
            //});
            resolve(results);
          } catch (error) {
              console.error('\n Error during search:', error.message);
              resolve([]);
          }
        }, 1000); // 1000ms debounce period
      });
    },
  });
  return answer;
}

[SBoudrias]

I think you could simplify that using the promise interface of node:timers https://nodejs.org/api/timers.html. And relying on the signal status to proceed of not after the timeout.

import { setTimeout } from 'node:timers/promises';
import { search } from '@inquirer/prompts';

const answer = await search({
  message: 'Select an npm package',
  source: async (input, { signal }) => {
    await setTimeout(300);
    if (signal.aborted) return [];

    // Do the search
    fetch(...)
  },
});

IMO that's a simple piece of code that can be implemented in the user land. Let me know if that'd work (I'll document the pattern as a recipe.)

[tanepiper]

@SBoudrias Yes that's a nice recipe! Thanks

[paul-uz]

Whats this supposed to do exactly?

I have an issue where if i type too fast, the result from an old search string (current input minus 1 character) are shown

[SBoudrias]

Debouncing will reduce load on API calls, ignoring certain keystroke until the user is done typing. If you're interacting with external service this can be important.

But it's not there by default ATM since not every use-case rely on network calls.

Side note, if you think you found a race condition, I'd be interested in reviewing a reproductible case. There shouldn't be race condition - so if there's one, it's a bug.