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;
+};

src/renderer/features/albums/components/album-list-header.tsx

@@ -2,6 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { Suspense, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { AlbumListHeaderFilters } from '/@/renderer/features/albums/components/album-list-header-filters';
@@ -22,17 +23,13 @@ interface AlbumListHeaderProps {
 }
 
 export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
-    const { itemCount } = useListContext();
-
     return (
         <Stack gap={0}>
             <PageHeader>
                 <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <PageTitle title={title} />
-                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                    <AlbumListHeaderBadge />
-                        {itemCount}
-                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -45,6 +42,16 @@ export const AlbumListHeader = ({ title }: AlbumListHeaderProps) => {
     );
 };
 
+const AlbumListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.ALBUM,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};
+
 const PageTitle = ({ title }: { title?: string }) => {
     const { t } = useTranslation();
     const { pageKey } = useListContext();

src/renderer/features/artists/components/album-artist-list-header.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { AlbumArtistListHeaderFilters } from '/@/renderer/features/artists/components/album-artist-list-header-filters';
@@ -18,7 +19,6 @@ interface AlbumArtistListHeaderProps {
 export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) => {
     const { t } = useTranslation();
 
-    const { itemCount } = useListContext();
     const pageTitle = title || t('page.albumArtistList.title', { postProcess: 'titleCase' });
 
     return (
@@ -27,9 +27,7 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
                 <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
-                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                    <AlbumArtistListHeaderBadge />
-                        {itemCount}
-                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -42,6 +40,16 @@ export const AlbumArtistListHeader = ({ title }: AlbumArtistListHeaderProps) =>
     );
 };
 
+const AlbumArtistListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.ALBUM_ARTIST,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};
+
 const PlayButton = () => {
     const { query } = useAlbumArtistListFilters();
 

src/renderer/features/artists/components/artist-list-header.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { ArtistListHeaderFilters } from '/@/renderer/features/artists/components/artist-list-header-filters';
@@ -18,7 +19,6 @@ interface ArtistListHeaderProps {
 export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
     const { t } = useTranslation();
 
-    const { itemCount } = useListContext();
     const pageTitle = title || t('entity.artist_other', { postProcess: 'titleCase' });
 
     return (
@@ -27,9 +27,7 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
                 <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
-                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                    <ArtistListHeaderBadge />
-                        {itemCount}
-                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -42,6 +40,16 @@ export const ArtistListHeader = ({ title }: ArtistListHeaderProps) => {
     );
 };
 
+const ArtistListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.ARTIST,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};
+
 const PlayButton = () => {
     const { query } = useArtistListFilters();
 

src/renderer/features/folders/components/folder-list-header.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { FolderListHeaderFilters } from '/@/renderer/features/folders/components/folder-list-header-filters';
@@ -8,6 +9,7 @@ import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library
 import { ListSearchInput } from '/@/renderer/features/shared/components/list-search-input';
 import { Group } from '/@/shared/components/group/group';
 import { Stack } from '/@/shared/components/stack/stack';
+import { LibraryItem } from '/@/shared/types/domain-types';
 
 interface FolderListHeaderProps {
     title?: string;
@@ -16,7 +18,6 @@ interface FolderListHeaderProps {
 export const FolderListHeader = ({ title }: FolderListHeaderProps) => {
     const { t } = useTranslation();
 
-    const { itemCount } = useListContext();
     const pageTitle = title || t('page.folderList.title', { postProcess: 'titleCase' });
 
     return (
@@ -26,9 +27,7 @@ export const FolderListHeader = ({ title }: FolderListHeaderProps) => {
                     <Stack>
                         <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
                     </Stack>
-                    <LibraryHeaderBar.Badge isLoading={itemCount === undefined}>
+                    <FolderListHeaderBadge />
-                        {itemCount}
-                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -40,3 +39,13 @@ export const FolderListHeader = ({ title }: FolderListHeaderProps) => {
         </Stack>
     );
 };
+
+const FolderListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.FOLDER,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};

src/renderer/features/genres/components/genre-list-header.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { GenreListHeaderFilters } from '/@/renderer/features/genres/components/genre-list-header-filters';
@@ -18,7 +19,6 @@ interface GenreListHeaderProps {
 export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
     const { t } = useTranslation();
 
-    const { itemCount } = useListContext();
     const pageTitle = title || t('page.genreList.title', { postProcess: 'titleCase' });
 
     return (
@@ -27,9 +27,7 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
                 <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
-                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                    <GenreListHeaderBadge />
-                        {itemCount}
-                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -42,6 +40,16 @@ export const GenreListHeader = ({ title }: GenreListHeaderProps) => {
     );
 };
 
+const GenreListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.GENRE,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};
+
 const PlayButton = () => {
     const { query } = useGenreListFilters();
 

src/renderer/features/playlists/components/playlist-list-header.tsx

@@ -1,5 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { PlaylistListHeaderFilters } from '/@/renderer/features/playlists/components/playlist-list-header-filters';
@@ -18,7 +19,6 @@ interface PlaylistListHeaderProps {
 export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
     const { t } = useTranslation();
 
-    const { itemCount } = useListContext();
     const pageTitle = title || t('page.playlistList.title', { postProcess: 'titleCase' });
 
     return (
@@ -27,9 +27,7 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
                 <LibraryHeaderBar ignoreMaxWidth>
                     <PlayButton />
                     <LibraryHeaderBar.Title>{pageTitle}</LibraryHeaderBar.Title>
-                    <LibraryHeaderBar.Badge isLoading={!itemCount}>
+                    <PlaylistListHeaderBadge />
-                        {itemCount}
-                    </LibraryHeaderBar.Badge>
                 </LibraryHeaderBar>
                 <Group>
                     <ListSearchInput />
@@ -42,6 +40,16 @@ export const PlaylistListHeader = ({ title }: PlaylistListHeaderProps) => {
     );
 };
 
+const PlaylistListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.PLAYLIST,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};
+
 const PlayButton = () => {
     const { query } = usePlaylistListFilters();
 

src/renderer/features/songs/components/song-list-header.tsx

@@ -2,6 +2,7 @@ import { useSuspenseQuery } from '@tanstack/react-query';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import { useIsFetchingItemListCount } from '/@/renderer/components/item-list/helpers/use-is-fetching-item-list';
 import { PageHeader } from '/@/renderer/components/page-header/page-header';
 import { useListContext } from '/@/renderer/context/list-context';
 import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
@@ -24,8 +25,6 @@ interface SongListHeaderProps {
 }
 
 export const SongListHeader = ({ title }: SongListHeaderProps) => {
-    const { itemCount } = useListContext();
-
     return (
         <Stack gap={0}>
             <PageHeader>
@@ -33,11 +32,7 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
                     <LibraryHeaderBar ignoreMaxWidth>
                         <PlayButton />
                         <PageTitle title={title} />
-                        <LibraryHeaderBar.Badge
+                        <SongListHeaderBadge />
-                            isLoading={itemCount === null || itemCount === undefined}
-                        >
-                            {itemCount}
-                        </LibraryHeaderBar.Badge>
                     </LibraryHeaderBar>
                     <Group>
                         <ListSearchInput />
@@ -51,6 +46,16 @@ export const SongListHeader = ({ title }: SongListHeaderProps) => {
     );
 };
 
+const SongListHeaderBadge = () => {
+    const { itemCount } = useListContext();
+
+    const isFetching = useIsFetchingItemListCount({
+        itemType: LibraryItem.SONG,
+    });
+
+    return <LibraryHeaderBar.Badge isLoading={isFetching}>{itemCount}</LibraryHeaderBar.Badge>;
+};
+
 const PlayButton = () => {
     const { customFilters } = useListContext();
     const { query } = useSongListFilters();