Как в React + rtq-query показывать спиннер при refetch при изменении параметров, но не показывать при polling?

Question

[NetFantomIO]

Есть страница, на которой отображаются элементы items. Есть pagination и фильтры. Фильтрация на бэкенде. Используется RTK Query.
Есть требование, что страница должена периодически обновляться в фоне, поэтому используется pollingInterval.

При переключении между страницами а также при изменении фильтров я хочу отображать спиннер. А вот при фоновом обновлении спиннер не нужно показывать.
Как это лучше реализовать? В RTK query возвращает isLoading и isFetching, однако первый устанавливается в true при первой загрузке компонента, а второй устанавливается в true при каждом запросе, в не зависимости от того изменились ли параметры или это polling.
Пока единственный вариант, который я вижу, это нагородить еще отдельный стейт в компоненте и useEffect's, и в через этот отдельный стейт понимать причину обновления данных. Но выглядит это велосипедно. Как обычно решается такая вроде бы типовая задача?

Примерный вид компонента:

export const MyPage: React.FC = () => {
    const itemsPerPage = 50;
    const [searchText, setSearchText] = useState(''),
    [activePage, setActivePage] = useState(1),
    [filters, setFilters] = useState<Filters>({
      status: 'all',
      category: '1'
    });

    const {
        data,
        isLoading,
        isFetching,
        isSuccess,
        refetch,
      } = useSearchItemsQuery(
            {
                sortBy: sortBy,
                startAt: (activePage - 1) * itemsPerPage,
                maxResults: itemsPerPage,
                searchText,
                filters,
              },
        { refetchOnFocus: true, pollingInterval: 30000 },
      );

    return (
        <div>
            {data && items.map(item => <Item key={item.id} item={item} />)}
            <Spinner show={isLoading || isFetching />
        </div>
    )
}

Comments

[Aetae]

Если в лоб, то очевидно: const isFirstLoading = !items.length && isLoading;

А так хз, мож какие спец-параметры есть.

[NetFantomIO]

Не понял как это поможет решить задачу. Мне не firstLoading определить надо, мне нужно при isFetching=true понимать фетч идет потому что пользователь поменял выборку (фильтр или страницу), или это работает polling запрос в бэкграунде.

Answer 1

[NetFantomIO]

Вообщем пока я придумал только такое решение:

export const MyPage: React.FC = () => {
    const itemsPerPage = 50;
    const [searchText, setSearchText] = useState(''),
    [activePage, setActivePage] = useState(1),
    [filters, setFilters] = useState<Filters>({
      status: 'all',
      category: '1'
    });

    const {
        data,
        isLoading,
        isFetching,
        isSuccess,
        refetch,
      } = useSearchItemsQuery(
            {
                sortBy: sortBy,
                startAt: (activePage - 1) * itemsPerPage,
                maxResults: itemsPerPage,
                searchText,
                filters,
              },
        { refetchOnFocus: true, pollingInterval: 30000 },
      );

  // Page loader
  const [showPageLoader, setShowPageLoader] = useState(true);
  useEffect(() => {
    setShowPageLoader(true);
  }, [activePage, itemsPerPage, sortBy, filters]);

  useEffect(() => {
    if (!isFetching) {
      setShowPageLoader(false);
    }
  }, [isFetching]);

    return (
        <div>
            {data && items.map(item => <Item key={item.id} item={item} />)}
            <Spinner show={isLoading || (isFetching && showPageLoader) />
        </div>
    )
}