Add a isDebouncing property to useDebouncedFetcher and add a key property

[janhesters]

If you want to create a "Saving ..." loading state, you don't only want to show that when the fetch is happening (e.g. via useNavigation()). Instead, you already want to show it if the fetcher is debouncing.

Also if you want to share access across components, you need the key property.

Example implementation - @sergiodxa please tag me if I should make a PR for this:

// This is basically copy-pasted from:
// https://github.com/sergiodxa/remix-utils/blob/main/src/react/use-debounce-fetcher.ts
// But the original useDebounceFetcher lacks the ability to tell you when it
// is debouncing: https://github.com/sergiodxa/remix-utils/discussions/410
// When you read this, upvote that discussion so the author implements this 😉
import type {
  FetcherWithComponents,
  SubmitFunction,
  SubmitOptions,
} from '@remix-run/react';
import { useFetcher } from '@remix-run/react';
import {
  useCallback,
  useEffect,
  useId,
  useRef,
  useSyncExternalStore,
} from 'react';

type SubmitTarget = Parameters<SubmitFunction>['0'];

/**
 * Submits a HTML `<form>` to the server without reloading the page.
 */
type DebounceSubmitFunction = (
  /**
   * Specifies the `<form>` to be submitted to the server, a specific
   * `<button>` or `<input type="submit">` to use to submit the form, or some
   * arbitrary data to submit.
   *
   * Note: When using a `<button>` its `name` and `value` will also be
   * included in the form data that is submitted.
   */
  target: SubmitTarget,
  /**
   * Options that override the `<form>`'s own attributes. Required when
   * submitting arbitrary data without a backing `<form>`. Additionally, you
   * can specify a `debounceTimeout` to delay the submission of the data.
   */
  options?: SubmitOptions & { debounceTimeout?: number },
) => void;

type DebouncedFetcher<Data = unknown> = Omit<
  FetcherWithComponents<Data>,
  'submit'
> & {
  submit: DebounceSubmitFunction;
  isDebouncing: boolean;
};

// Create a global store for debouncing states
type Subscriber = () => void;
type Store = {
  subscribe: (key: string, callback: Subscriber) => () => void;
  getSnapshot: (key: string) => boolean;
  setState: (key: string, isDebouncing: boolean) => void;
};

const debounceStore: Store = (() => {
  const state = new Map<string, boolean>();
  const subscribers = new Map<string, Set<Subscriber>>();

  return {
    subscribe(key, callback) {
      let subs = subscribers.get(key);
      if (!subs) {
        subs = new Set();
        subscribers.set(key, subs);
      }
      subs.add(callback);
      return () => {
        subs!.delete(callback);
        if (subs.size === 0) {
          subscribers.delete(key);
        }
      };
    },
    getSnapshot(key) {
      return state.get(key) ?? false;
    },
    setState(key, isDebouncing) {
      state.set(key, isDebouncing);
      const subs = subscribers.get(key);
      if (subs) {
        subs.forEach(callback => callback());
      }
    },
  };
})();

export function useDebounceFetcher<Data>(
  options: { key?: string } = {},
): DebouncedFetcher<Data> {
  const id = useId();
  const key = options.key ?? id;
  const timeoutRef = useRef<NodeJS.Timeout | undefined>();

  useEffect(() => {
    // no initialize step required since timeoutRef defaults undefined
    let timeout = timeoutRef.current;
    return () => {
      if (timeout) clearTimeout(timeout);
    };
  }, []);

  const isDebouncing = useSyncExternalStore(
    callback => debounceStore.subscribe(key, callback),
    () => debounceStore.getSnapshot(key),
    () => false, // getServerSnapshot
  );

  const fetcher = useFetcher<Data>(options) as DebouncedFetcher<Data>;

  // Clone the original submit to avoid a recursive loop
  const originalSubmit = fetcher.submit;

  const setIsDebouncing = useCallback(
    (value: boolean) => {
      debounceStore.setState(key, value);
    },
    [key],
  );

  fetcher.submit = useCallback(
    (target, { debounceTimeout = 0, ...submitOptions } = {}) => {
      if (timeoutRef.current) clearTimeout(timeoutRef.current);
      setIsDebouncing(true);

      if (!debounceTimeout || debounceTimeout <= 0) {
        setIsDebouncing(false);
        return originalSubmit(target, submitOptions);
      }

      timeoutRef.current = setTimeout(() => {
        setIsDebouncing(false);
        originalSubmit(target, submitOptions);
      }, debounceTimeout);
    },
    [originalSubmit, setIsDebouncing],
  );

  fetcher.isDebouncing = isDebouncing;

  return fetcher;
}

[edgars-sirokovs]

@sergiodxa any plans on adding this feature?