vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 13:00:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

improve list loading indicator

Browse Source
This commit is contained in:
jeffvli
2025-12-28 03:05:20 -08:00
parent dde4e1b33c
commit 99be12e648
9 changed files with 113 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/artists/components/album-artist-list-header.tsx
+12 -4
View File
@@ -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}>
{itemCount}
</LibraryHeaderBar.Badge>
<AlbumArtistListHeaderBadge />
</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
+12 -4
View File
@@ -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}>
{itemCount}
</LibraryHeaderBar.Badge>
<ArtistListHeaderBadge />
</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();