uselongfetch v1.0.6

useLongFetch react hook

You can mark asynchronous operation as a long use this hook.

const {
  status: { isLoading, data, error },
  secondsFromStart,
  longFetchHelper,
  isLongFetch,
} = useHelperPromiseFunc(seconds);

useHelperPromiseFunc(seconds: number);

Parameters:

seconds: mark when fetch is long and isLongFetch will true

import { useHelperPromiseFunc } from "uselongfetch";

const SomeYouComponent = () => {
  const {
    status: { isLoading: isLoadingFirst },
    secondsFromStart: secondsFromStartFirst,
    longFetchHelper: fetchHelper1,
    isLongFetch: isLongFetchFirst,
  } = useHelperPromiseFunc(3);

  const {
    status: { isLoading: isLoadingSecond },
    secondsFromStart: secondsFromStartSecond,
    longFetchHelper: fetchHelper2,
    isLongFetch: isLongFetchSecond,
  } = useHelperPromiseFunc(5);

  const someFetch1 = () => fetchHelper1(fetch("http://localhost:3001/"));
  const someFetch2 = () => fetchHelper2(fetch("http://localhost:3001/"));

  return (
    <>
      <button onClick={someFetch1}>Start long fetch 1</button>
      <button onClick={someFetch2}>Start long fetch 2</button>
      <div>Content...</div>
      {isLongFetchFirst && <div>Don't worry. We need more time</div>}
      {isLongFetchSecond && <div>Don't worry. We need more time</div>}
    </>
  );
};