useLoading.ts

import { useCallback, useMemo, useState } from 'react';

type ValueOrPromiseValue<Value> = Value extends Promise<infer PromiseValue>
  ? PromiseValue
  : Value;

const useLoading = () => {
  const [ticks, setTicks] = useState(0);

  const withLoading = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    <F extends (this: any, ...args: any[]) => any>(fn: F) => {
      const loadable = function loadable(
        this: ThisParameterType<F>,
        ...args: Parameters<F>
      ): Promise<ValueOrPromiseValue<ReturnType<F>>> {
        setTicks(ticks => ticks + 1);
        return new Promise<ValueOrPromiseValue<ReturnType<F>>>(
          (resolve, reject) => {
            try {
              resolve(fn.apply(this, args));
            } catch (error) {
              reject(error);
            }
          }
        ).finally(() => setTicks(ticks => ticks - 1));
      };
      loadable.name = `withLoading(${fn.name ?? 'Anonymous Function'})`;
      return loadable;
    },
    []
  );

  const loading = useMemo(() => ticks > 0, [ticks]);

  return {
    loading,
    withLoading
  };
};

export default useLoading;