Send search request to Algolia with some delay

[Markeli]

🚀 Feature

Now a new search request is sending to Aloglia on each query change. I want to reduce the number of requests to Aloglia. It would be nice if Docusarus will have some delay option n config. If the delay is set, the request will be sent if the user is not printing. Without delay in the config, the search behavior will be the same as now.

Have you read the Contributing Guidelines on issues?

Yes.

Motivation

This feature can reduce the number of requests to Algolia, and therefore reduce the costs of search.

API Design

Add new option to Algolia search plugin config. If the delay is set search query will be sent only after a user stops inputting the query. I assume that desired behavior can be easily achieved by React hooks. There is an example on StackOverflow: https://stackoverflow.com/questions/53071774/reactjs-delay-onchange-while-typing

Have you tried building it?

Unfortunately, I'm not a react developer, so I can't build it myself.

[slorber]

The search modal is a react component provided by Algolia on which we don't have control, but we allow to customize it through props.

It's unlikely Docusaurus will handle that throttle/deboucing logic.

You'd rather ask the Algolia DocSearch team: if they implement this feature (maybe it already exists?), then Docusaurus will be able to use it by passing extra config options.

ping @shortcuts

[Markeli]

Algolia has been already supported this feature. It's named seacrhAsYouType.
https://www.algolia.com/doc/api-reference/widgets/search-box/js/

Can you add extra config options for it?

[shortcuts]

Hey @Markeli,

I've attached a sandbox to the body of this PR, which will help you to implement a debounced search method.

(Need confirmation from @slorber) You should be able to add the transformSearchClient option to your docusaurus config, which will forward the logic to the DocSearch component

[slorber]

Thanks @shortcuts

Not sure how this works exactly but we already forward props to the React component exported as @docsearch/react/modal

However this prop was already provided by @francoischalifour:

  const transformSearchClient = useCallback(
    (searchClient) => {
      searchClient.addAlgoliaAgent(
        'docusaurus',
        siteMetadata.docusaurusVersion,
      );

      return searchClient;
    },
    [siteMetadata.docusaurusVersion],
  );

And it's code that runs in the browser so it's not possible to pass a fn to the browser through Docusaurus config file. If this is the only exposed API, this means Docusaurus users will have to swizzle the component and override the existing transformSearchClient. It's not ideal but can be good enough, considering this usecase is not common. It would be simpler if the component accepted a serializable prop like transformAsYouType={false}

[xixixao]

@slorber The current docs suggest that all algolia options are supported by the docusaurus config:
https://docusaurus.io/docs/search#customizing-the-algolia-search-behavior
It took me a while to figure out what you wrote above, that functions (transformSearchClient) cannot be passed from the config, and also that the component does not allow all the listed options (placeholder for example). We ended up swizzling the component but at least it would be great to fix the docs and mention which props are actually supported (or which ones are not).

[slorber]

@xixixao it's not possible to provide any callback from Docusaurus config to the client-side JavaScript.

If you want to allow passing transformSearchClient you'd have to swizzle anyway.

If you want to make it easier (just wrapping instead of ejecting), I would be happy to accept a similar PR as this one: #8462

If there are props that are missing and we can add support, then I'm happy to do so => please submit a code PR. In case it's not possible to add support, happy to document so => please submit a doc PR.

[slorber]

From what I see, we could easily allow to pass a placeholder, it's just we should apply the {...props} spread after those props.

Do you want to submit a PR?