Option to debounce submit?

[tavoyne]

This would be particularly useful with auto-submitting forms, e.g. searches. We don't want every keystroke to trigger a submit.

It could look something like this:

export default App () {
  const { Form, submission, submit } = useFetcher();
  const { result, search } = useLoaderData();
  
  const handleFormChange = (evt) => {
    submit(evt.currentTarget, { debounce: 500 });
  };

  return (
    <>
      <p>Search: {submission.formData.get("search") || search}</p>
      <p>Result: {result}</p>
      <Form onChange={handleFormChange}>
        <input name="search" />
      </Form>
    </>
  )
}

Right now we can achieve that by debouncing the submit call itself, e.g.:

const handleFormChange = (evt) => {
  clearTimeout(timeoutIdRef.current);

  timeoutIdRef.current = setTimeout(
    fetcher.submit.bind(null, evt.currentTarget),
    500
  );
};

But that means submission doesn't hold the latest input data while the timeout hasn't finished, so we need an extra state.