Prevent double fetching when force refreshing paginated views (#1637)

* Prevent double fetching when force refreshing paginated views

* remove await from infinite list loader query invalidation

* add mutation and loading state to list refresh

* add non-suspense query to list genre filters to add loading state

* remove list count data set on random queries

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>

src/renderer/features/shared/components/list-refresh-button.tsx

@@ -1,3 +1,4 @@
+import { useIsMutating } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
 import { eventEmitter } from '/@/renderer/events/event-emitter';
@@ -10,9 +11,16 @@ interface ListRefreshButtonProps {
 }
 
 export const ListRefreshButton = ({ disabled, listKey }: ListRefreshButtonProps) => {
+    const isRefreshing = useIsMutating({ mutationKey: getListRefreshMutationKey(listKey) }) > 0;
+
     const handleRefresh = useCallback(() => {
         eventEmitter.emit('ITEM_LIST_REFRESH', { key: listKey });
     }, [listKey]);
 
-    return <RefreshButton disabled={disabled} onClick={handleRefresh} />;
+    return <RefreshButton disabled={disabled} loading={isRefreshing} onClick={handleRefresh} />;
 };
+
+export const LIST_REFRESH_MUTATION_KEY = 'item-list-refresh';
+
+export const getListRefreshMutationKey = (listKey: string) =>
+    [LIST_REFRESH_MUTATION_KEY, listKey] as const;

src/renderer/features/shared/components/refresh-button.tsx

@@ -2,9 +2,11 @@ import { useTranslation } from 'react-i18next';
 
 import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
 
-interface RefreshButtonProps extends ActionIconProps {}
+interface RefreshButtonProps extends ActionIconProps {
+    loading?: boolean;
+}
 
-export const RefreshButton = ({ onClick, ...props }: RefreshButtonProps) => {
+export const RefreshButton = ({ loading, onClick, ...props }: RefreshButtonProps) => {
     const { t } = useTranslation();
 
     return (
@@ -14,6 +16,7 @@ export const RefreshButton = ({ onClick, ...props }: RefreshButtonProps) => {
                 size: 'lg',
                 ...props.iconProps,
             }}
+            loading={loading}
             onClick={onClick}
             tooltip={{
                 label: t('common.refresh', { postProcess: 'sentenceCase' }),