improve list loading indicator

src/renderer/components/item-list/helpers/item-list-infinite-loader.ts

@@ -13,7 +13,7 @@ import { eventEmitter } from '/@/renderer/events/event-emitter';
 import { UserFavoriteEventPayload, UserRatingEventPayload } from '/@/renderer/events/events';
 import { LibraryItem } from '/@/shared/types/domain-types';
 
-const getQueryKeyName = (itemType: LibraryItem): string => {
+export const getListQueryKeyName = (itemType: LibraryItem): string => {
     switch (itemType) {
         case LibraryItem.ALBUM:
             return 'albums';
@@ -115,7 +115,7 @@ export const useItemListInfiniteLoader = ({
 
                     return result;
                 },
-                queryKey: queryKeys[getQueryKeyName(itemType)].list(serverId, queryParams),
+                queryKey: queryKeys[getListQueryKeyName(itemType)].list(serverId, queryParams),
             });
 
             const endIndex = startIndex + itemsPerPage;

src/renderer/components/item-list/helpers/use-is-fetching-item-list.ts

@@ -0,0 +1,26 @@
+import { useIsFetching } from '@tanstack/react-query';
+
+import { queryKeys } from '/@/renderer/api/query-keys';
+import { getListQueryKeyName } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
+import { useCurrentServerId } from '/@/renderer/store';
+import { LibraryItem } from '/@/shared/types/domain-types';
+
+export const useIsFetchingItemListCount = ({ itemType }: { itemType: LibraryItem }) => {
+    const serverId = useCurrentServerId();
+
+    const isFetching = useIsFetching({
+        queryKey: queryKeys[getListQueryKeyName(itemType)].count(serverId),
+    });
+
+    return isFetching > 0;
+};
+
+export const useIsFetchingItemList = ({ itemType }: { itemType: LibraryItem }) => {
+    const serverId = useCurrentServerId();
+
+    const isFetching = useIsFetching({
+        queryKey: queryKeys[getListQueryKeyName(itemType)].list(serverId),
+    });
+
+    return isFetching > 0;
+};