improve list loading indicator

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
-                            isLoading={itemCount === null || itemCount === undefined}
-                        >
-                            {itemCount}
-                        </LibraryHeaderBar.Badge>
+                        <SongListHeaderBadge />
                     </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();