large performance refactor

This commit is contained in:
jeffvli
2025-11-26 13:54:45 -08:00
parent 948f428546
commit 60cdea6787
32 changed files with 1030 additions and 502 deletions
@@ -100,6 +100,7 @@ export const LibraryHeader = forwardRef(
<Image
alt="cover"
className={styles.image}
containerClassName={styles.image}
loading="eager"
onError={onImageError}
src={imageUrl || ''}
@@ -1,6 +1,7 @@
import { QueryClient } from '@tanstack/react-query';
import { queryKeys } from '/@/renderer/api/query-keys';
import { infiniteLoaderDataQueryKey } from '/@/renderer/components/item-list/helpers/item-list-infinite-loader';
import {
Album,
AlbumArtist,
@@ -8,7 +9,6 @@ import {
AlbumArtistListResponse,
AlbumDetailResponse,
AlbumListResponse,
Artist,
ArtistListResponse,
FavoriteArgs,
LibraryItem,
@@ -151,6 +151,52 @@ export const applyFavoriteOptimisticUpdates = (
});
}
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
variables.apiClientProps.serverId,
LibraryItem.ALBUM,
);
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ALBUM_ARTIST: {
@@ -271,6 +317,52 @@ export const applyFavoriteOptimisticUpdates = (
});
}
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
variables.apiClientProps.serverId,
LibraryItem.ALBUM_ARTIST,
);
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ARTIST: {
@@ -291,7 +383,7 @@ export const applyFavoriteOptimisticUpdates = (
if (prev) {
return {
...prev,
items: prev.items.map((item: Artist) => {
items: prev.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
@@ -332,7 +424,7 @@ export const applyFavoriteOptimisticUpdates = (
pages: prev.pages.map((page: ArtistListResponse) => {
return {
...page,
items: page.items.map((item: Artist) => {
items: page.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
@@ -349,6 +441,52 @@ export const applyFavoriteOptimisticUpdates = (
});
}
const infiniteLoaderQueryKey = infiniteLoaderDataQueryKey(
variables.apiClientProps.serverId,
LibraryItem.ARTIST,
);
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userFavorite: isFavorite }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.PLAYLIST_SONG:
@@ -10,7 +10,6 @@ import {
AlbumArtistListResponse,
AlbumDetailResponse,
AlbumListResponse,
Artist,
ArtistListResponse,
LibraryItem,
SetRatingArgs,
@@ -120,6 +119,54 @@ export const applyRatingOptimisticUpdates = (
});
}
// Update infinite loader custom query keys
const infiniteLoaderQueryKey = [
variables.apiClientProps.serverId,
'item-list-infinite-loader',
LibraryItem.ALBUM,
];
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ALBUM_ARTIST: {
@@ -206,6 +253,54 @@ export const applyRatingOptimisticUpdates = (
});
}
// Update infinite loader custom query keys
const infiniteLoaderQueryKey = [
variables.apiClientProps.serverId,
'item-list-infinite-loader',
LibraryItem.ALBUM_ARTIST,
];
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.ARTIST: {
@@ -223,7 +318,7 @@ export const applyRatingOptimisticUpdates = (
queryClient.setQueryData(queryKey, (prev: ArtistListResponse) => {
return {
...prev,
items: prev.items.map((item: Artist) => {
items: prev.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
@@ -254,7 +349,7 @@ export const applyRatingOptimisticUpdates = (
pages: prev.pages.map((page: ArtistListResponse) => {
return {
...page,
items: page.items.map((item: Artist) => {
items: page.items.map((item: AlbumArtist) => {
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
@@ -268,6 +363,54 @@ export const applyRatingOptimisticUpdates = (
});
}
// Update infinite loader custom query keys
const infiniteLoaderQueryKey = [
variables.apiClientProps.serverId,
'item-list-infinite-loader',
LibraryItem.ARTIST,
];
const infiniteLoaderQueries = queryClient.getQueriesData({
exact: false,
queryKey: infiniteLoaderQueryKey,
});
if (infiniteLoaderQueries.length) {
infiniteLoaderQueries.forEach(([queryKey, data]) => {
if (data) {
previousQueries.push({ data, queryKey });
queryClient.setQueryData(
queryKey,
(
prev:
| undefined
| {
data: unknown[];
pagesLoaded: Record<string, boolean>;
},
) => {
if (prev && prev.data) {
return {
...prev,
data: prev.data.map((item: any) => {
if (!item || !item.id) {
return item;
}
return itemIdSet.has(item.id)
? { ...item, userRating: rating }
: item;
}),
};
}
return prev;
},
);
}
});
}
break;
}
case LibraryItem.PLAYLIST_SONG: