How to differentiate prefetch requests from normal fetch requests? - redux-toolkit

Question

I am having trouble differentiating regular query requests from prefetch query requests in RTK Query. My goal is simple; I want a global loading spinner whenever a query fetches data. However, I also want to implement prefetch in a List so that paginating through different pages feels instantaneous for the end-user. What is happening now is that when I go to the next page in my List it is correctly prefetched so switching happens instantly. But then my global loading spinner is triggered for the prefetching of the page after that (which I obviously don't want happening). So I want to find out how to differentiate the prefetching requests from the regular fetching requests.
I have done extensive searching both on SO and the issue-tracker of redux-toolkit, but without success. Also, I have looked into the query requests that are made from prefetch requests and regular requests but those seem identical (which I would understand since the rtk-query team probably abstracted this).
Relevant code below:
LoadingWrapper.tsx
const LoadingWrapper = ({ children }) => {
// HOW TO DIFFERENTIATE HERE BETWEEN QUERIES?
const isSomeQueryPending = useSelector((state: RootState) => Object.values(state.api.queries).some((query) => query.status === 'pending'));
return (
<>
<LoadingScreen loading={isSomeQueryPending} />
{children}
</>
);
};
EntityList.tsx
import React, {
useCallback, useEffect, useState,
} from 'react';
import { useGetEntitiesQuery, usePrefetch } from '../../../Path/To/My/Api';
const DEFAULT_PAGE_SIZE = 50;
const EntityList: (): ReactElement => {
const [filter, setFilter] = useState<IEntityFilter>({
search: '',
offset: 0,
limit: DEFAULT_PAGE_SIZE,
});
const { data } = useGetEntitiesQuery(filter);
const prefetchPage = usePrefetch('getEntities');
const prefetchNext = useCallback(() => {
const prefetchFilter = { ...filter, offset: filter.offset + filter.limit };
prefetchPage(prefetchFilter);
}, [prefetchPage, filter.offset]);
useEffect(() => {
if (!(filter.offset + filter.limit >= data?.numberOfEntities)) {
prefetchNext();
}
}, [data, prefetchNext, filter.offset]);
... // Some data handling and showing of data in a list unrelated.
}
Api.ts
// This is my (injected) API endpoint
getEntities: builder.query<IEntities, IEntityFilter>({
query: (filter) => ({ url: 'entities', params: filter }),
transformResponse: (baseQueryReturnValue: IEntitiesResponse) => baseQueryReturnValue.body,
providesTags: (result) => (result
? [
...result.entities.map(({ object_id }) => ({ type: 'Entity', id: object_id } as const)),
{ type: 'Entity', id: 'LIST' },
]
: [{ type: 'Entity', id: 'LIST' }]
),
}),
So the question is as follows: how can I differentiate between the normal fetch query (useGetEntitiesQuery) and the prefetched version of that in my LoadingWrapper.tsx. And if this is not possible, what is the recommended way of achieving my goal?