useQuery time delay of data fetching

[leonelcaroc]

How to delay isLoading state by 5 secs so that the user can see the UI loading component? I'm using useQuery

[TkDodo]

That's a ui problem that you have to solve on the ui layer.

[louis-young]

As above, deferring a loading state is something you'd need to handle yourself; this isn't the responsibility of TanSack Query.

[andymerskin]

@TkDodo / @louis-young - I disagree, and here's why (hear me out):

This very much feels like an appropriate problem for Query to solve, similar to handling optimistic updates. It's a common problem that's tedious to solve on your own that Query could really shine providing to users.

The problem

Solving this common problem in the UI code is tedious by itself, because it requires you write a useEffect block (React) that watches several pieces of state from Query, including isLoading, and isFetching — along with any other weird edge cases needing Query's state.

Then, within that block you must setup the timer itself and manage the state in your component manually. After all of that, you've got yourself a pretty hairy mess:

const { isFetching, isLoading } = useQuery(...);
const [fetchTime, setFetchTime] = useState(0);
const intervalRef = useRef();

useEffect(() => {
  if (!isFetching || !isLoading) {
    clearInterval(intervalRef.current);
    return;
  }

  intervalRef.current = setInterval(() => {
    setFetchTime(current => current + 100);
  }, 100); // every 100 milliseconds

  return () => clearInterval(intervalRef.current);
}, [isFetching, isLoading]);

if (fetchTime >= 3000 && (isFetching || isLoading)) {
  return <LoadingState />;
}

return <IdealState />;

This is kind of gross, and very bug-prone since Query isn't handling this for me at a library level. Now, this could be extracted into a hook that takes a UseQueryResult, makes its checks, and returns a fetchTime value, but it would be brittle.

Suggested solution:

I'd love to see usage like this:

const { fetchTime, isFetching } = useQuery(...);

// only show loading spinner if it's been loading for a long time, otherwise allow the UI to flash the cache updates...
if (fetchTime >= 3000 && isFetching) {
  return <LoadingState />
}

return <IdealState />

where fetchTime simply resets internally every time a new fetch happens.

[wilkinsonj]

Completely disagree that this is a UI problem. What to do with a specific fetchtime is a UI concern.

Determining the current fetch time? Is not.