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

Prevent double fetching when force refreshing paginated views (#1637)

Browse Source 
* Prevent double fetching when force refreshing paginated views

* remove await from infinite list loader query invalidation

* add mutation and loading state to list refresh

* add non-suspense query to list genre filters to add loading state

* remove list count data set on random queries

---------

Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Damien Erambert
2026-02-02 20:25:19 -08:00
committed by GitHub
parent 72fc5beb98
commit 55a6ea4fca
11 changed files with 140 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/components/jellyfin-album-filters.tsx
+4 -1
View File
@@ -52,9 +52,12 @@ export const JellyfinAlbumFilters = ({
setMinYear,
} = useAlbumListFilters();
// TODO - eventually replace with /items/filters endpoint to fetch genres and tags specific to the selected library
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
src/renderer/features/albums/components/navidrome-album-filters.tsx
+22 -3
View File
@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import {
ArtistMultiSelectRow,
GenreMultiSelectRow,
@@ -22,7 +22,12 @@ import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import {
AlbumArtistListSort,
GenreListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
interface NavidromeAlbumFiltersProps {
disableArtistFilter?: boolean;
@@ -54,7 +59,20 @@ export const NavidromeAlbumFilters = ({
setRecentlyPlayed,
} = useAlbumListFilters();
const genreListQuery = useGenreList();
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
@@ -333,6 +351,7 @@ export const NavidromeAlbumFilters = ({
<VirtualMultiSelect
displayCountType="album"
height={220}
isLoading={genreListQuery.isFetching}
label={genreFilterLabel}
onChange={handleGenreChange}
options={genreList}
src/renderer/features/albums/components/subsonic-album-filters.tsx
+24 -4
View File
@@ -1,11 +1,11 @@
import { useSuspenseQuery } from '@tanstack/react-query';
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { ChangeEvent, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { useAlbumListFilters } from '/@/renderer/features/albums/hooks/use-album-list-filters';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import {
ArtistMultiSelectRow,
GenreMultiSelectRow,
@@ -21,7 +21,12 @@ import { Stack } from '/@/shared/components/stack/stack';
import { Switch } from '/@/shared/components/switch/switch';
import { Text } from '/@/shared/components/text/text';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import {
AlbumArtistListSort,
GenreListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
interface SubsonicAlbumFiltersProps {
disableArtistFilter?: boolean;
@@ -90,7 +95,20 @@ export const SubsonicAlbumFilters = ({
[isArtistDisabled, setAlbumArtist],
);
const genreListQuery = useGenreList();
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
@@ -252,6 +270,7 @@ export const SubsonicAlbumFilters = ({
disabled={isArtistDisabled}
displayCountType="album"
height={300}
isLoading={albumArtistListQuery.isFetching}
label={artistFilterLabel}
onChange={handleAlbumArtistFilter}
options={selectableAlbumArtists}
@@ -268,6 +287,7 @@ export const SubsonicAlbumFilters = ({
disabled={isGenreDisabled}
displayCountType="album"
height={220}
isLoading={genreListQuery.isFetching}
label={genreFilterLabel}
onChange={handleGenresFilter}
options={genreList}
src/renderer/features/shared/components/list-refresh-button.tsx
+9 -1
View File
@@ -1,3 +1,4 @@
import { useIsMutating } from '@tanstack/react-query';
import { useCallback } from 'react';
import { eventEmitter } from '/@/renderer/events/event-emitter';
@@ -10,9 +11,16 @@ interface ListRefreshButtonProps {
}
export const ListRefreshButton = ({ disabled, listKey }: ListRefreshButtonProps) => {
const isRefreshing = useIsMutating({ mutationKey: getListRefreshMutationKey(listKey) }) > 0;
const handleRefresh = useCallback(() => {
eventEmitter.emit('ITEM_LIST_REFRESH', { key: listKey });
}, [listKey]);
return <RefreshButton disabled={disabled} onClick={handleRefresh} />;
return <RefreshButton disabled={disabled} loading={isRefreshing} onClick={handleRefresh} />;
};
export const LIST_REFRESH_MUTATION_KEY = 'item-list-refresh';
export const getListRefreshMutationKey = (listKey: string) =>
[LIST_REFRESH_MUTATION_KEY, listKey] as const;
src/renderer/features/shared/components/refresh-button.tsx
+5 -2
View File
@@ -2,9 +2,11 @@ import { useTranslation } from 'react-i18next';
import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
interface RefreshButtonProps extends ActionIconProps {}
interface RefreshButtonProps extends ActionIconProps {
loading?: boolean;
}
export const RefreshButton = ({ onClick, ...props }: RefreshButtonProps) => {
export const RefreshButton = ({ loading, onClick, ...props }: RefreshButtonProps) => {
const { t } = useTranslation();
return (
@@ -14,6 +16,7 @@ export const RefreshButton = ({ onClick, ...props }: RefreshButtonProps) => {
size: 'lg',
...props.iconProps,
}}
loading={loading}
onClick={onClick}
tooltip={{
label: t('common.refresh', { postProcess: 'sentenceCase' }),
src/renderer/features/songs/components/jellyfin-song-filters.tsx
+22 -4
View File
@@ -1,10 +1,10 @@
import { useSuspenseQuery } from '@tanstack/react-query';
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import {
ArtistMultiSelectRow,
GenreMultiSelectRow,
@@ -22,7 +22,12 @@ import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { YesNoSelect } from '/@/shared/components/yes-no-select/yes-no-select';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import {
AlbumArtistListSort,
GenreListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
interface JellyfinSongFiltersProps {
disableArtistFilter?: boolean;
@@ -41,7 +46,20 @@ export const JellyfinSongFilters = ({
// Despite the fact that getTags returns genres, it only returns genre names.
// We prefer using IDs, hence the double query
const genreListQuery = useGenreList();
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreList = useMemo(() => {
if (!genreListQuery.data) return [];
src/renderer/features/songs/components/navidrome-song-filters.tsx
+23 -4
View File
@@ -1,10 +1,10 @@
import { useSuspenseQuery } from '@tanstack/react-query';
import { useQuery, useSuspenseQuery } from '@tanstack/react-query';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { getItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { artistsQueries } from '/@/renderer/features/artists/api/artists-api';
import { useGenreList } from '/@/renderer/features/genres/api/genres-api';
import { genresQueries } from '/@/renderer/features/genres/api/genres-api';
import {
ArtistMultiSelectRow,
GenreMultiSelectRow,
@@ -21,7 +21,12 @@ import { SegmentedControl } from '/@/shared/components/segmented-control/segment
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { useDebouncedCallback } from '/@/shared/hooks/use-debounced-callback';
import { AlbumArtistListSort, LibraryItem, SortOrder } from '/@/shared/types/domain-types';
import {
AlbumArtistListSort,
GenreListSort,
LibraryItem,
SortOrder,
} from '/@/shared/types/domain-types';
interface NavidromeSongFiltersProps {
disableArtistFilter?: boolean;
@@ -38,7 +43,20 @@ export const NavidromeSongFilters = ({
const { query, setArtistIds, setCustom, setFavorite, setGenreId, setMaxYear, setMinYear } =
useSongListFilters();
const genreListQuery = useGenreList();
const genreListQuery = useQuery(
genresQueries.list({
options: {
gcTime: 1000 * 60 * 2,
staleTime: 1000 * 60 * 1,
},
query: {
sortBy: GenreListSort.NAME,
sortOrder: SortOrder.ASC,
startIndex: 0,
},
serverId,
}),
);
const genreList = useMemo(() => {
if (!genreListQuery?.data) return [];
@@ -279,6 +297,7 @@ export const NavidromeSongFilters = ({
<VirtualMultiSelect
displayCountType="song"
height={220}
isLoading={genreListQuery.isFetching}
label={genreFilterLabel}
onChange={handleGenreChange}
options={genreList}
src/renderer/features/songs/components/subsonic-song-filters.tsx
+2
View File
@@ -159,6 +159,7 @@ export const SubsonicSongFilters = ({
disabled={isArtistDisabled}
displayCountType="song"
height={300}
isLoading={albumArtistListQuery.isFetching}
label={artistFilterLabel}
onChange={handleArtistFilter}
options={selectableAlbumArtists}
@@ -175,6 +176,7 @@ export const SubsonicSongFilters = ({
disabled={isGenreDisabled}
displayCountType="song"
height={220}
isLoading={genreListQuery.isFetching}
label={genreFilterLabel}
onChange={handleGenresFilter}
options={genreList}