Combining debounced query with `isFetching` | TanStack | Page 1

Hi! I'm running into an issue that I'm not sure how to approach. It seems like I'm somewhat on the right track, but I'm a bit stumped on what to do to resolve this.

I have the following situation:

// Calling a summary endpoint with debounce to avoid excessive calls

// This debounce function is a custom hook, just a useEffect wrapper
const debouncedDto = useDebouncedValueDeep(template, 800);

const blockSummaryQuery = useQuery({
    queryKey: ['Api', 'templateSummary', debouncedDto],
    queryFn: () => Api.templateSummary(debouncedDto)
    placeholderData: keepPreviousData,
});

This nicely waits for quick changes to be done before calling a summary again. However, there is one problem related to stale data:

{blockSummaryQuery.isFetching && <LoadingSpinner />}

This loading spinner almost never shows up, because it doesn't consider the 800 ms of 'stale' data being displayed.
I need to somehow know that a debounce is currently happening OR that a fetch is pending.

Do you have suggestions or ideas on how to solve this properly? From searching the docs, it seems like there's no debounce for tanstack query OOTB.

#Combining debounced query with `isFetching`