disableTargetUntilResolved.js

/**
 * A wrapper for async (probably mostly click) event handlers that disables the event target
 * until the handler resolves (or rejects). This prevents double-clicks/multiple submissions.
 * It sets target.disabled, but it could just as easily modify classNames or style.pointerEvents.
 *
 * @template {Event} E
 * @template Res
 * @param {(e: E) => Promise<Res>} callback - Async event handler to wrap
 * @returns {(e: E) => Promise<Res>} Wrapped event handler that automagically disables target
 *
 * @example button.addEventListener('click', disableTargetUntilResolved(async () => { await wait(0.5); }));
 */
export function disableTargetUntilResolved(callback) {
  return async e => {
    e.target.disabled = true;
    try {
      const returnVal = await callback(e);
      e.target.disabled = false;
      return returnVal;
    } catch (err) {
      e.target.disabled = false;
      throw err;
    }
  };
}