vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20:12 +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/components/item-list/helpers/item-list-infinite-loader.ts
+2 -2
View File
@@ -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
+26
View File
@@ -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
+12 -5
View File
@@ -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}>
{itemCount}
</LibraryHeaderBar.Badge>
<AlbumListHeaderBadge />
</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
+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();
src/renderer/features/folders/components/folder-list-header.tsx
+13 -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 { 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}>
{itemCount}
</LibraryHeaderBar.Badge>
<FolderListHeaderBadge />
</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
+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 { 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}>
{itemCount}
</LibraryHeaderBar.Badge>
<GenreListHeaderBadge />
</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
+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 { 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}>
{itemCount}
</LibraryHeaderBar.Badge>
<PlaylistListHeaderBadge />
</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
+12 -7
View File
@@ -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();