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

re-add default suspense to album/artist routes

Browse Source
This commit is contained in:
jeffvli
2026-04-04 22:25:21 -07:00
parent 6c73d06dcf
commit 3e5a8ac78d
9 changed files with 42 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/albums/routes/album-detail-route.tsx
+7 -12
View File
@@ -1,6 +1,6 @@
import { useQuery } from '@tanstack/react-query';
import { useSuspenseQuery } from '@tanstack/react-query';
import { useRef } from 'react';
import { useLocation, useParams } from 'react-router';
import { useParams } from 'react-router';
import { useItemImageUrl } from '/@/renderer/components/item-image/item-image';
import { NativeScrollArea } from '/@/renderer/components/native-scroll-area/native-scroll-area';
@@ -16,7 +16,7 @@ import { LibraryContainer } from '/@/renderer/features/shared/components/library
import { LibraryHeaderBar } from '/@/renderer/features/shared/components/library-header-bar';
import { PageErrorBoundary } from '/@/renderer/features/shared/components/page-error-boundary';
import { useFastAverageColor } from '/@/renderer/hooks';
import { useAlbumBackground, useCurrentServer } from '/@/renderer/store';
import { useAlbumBackground, useCurrentServerId } from '/@/renderer/store';
import { LibraryItem } from '/@/shared/types/domain-types';
const ALBUM_DETAIL_BG_FALLBACK = 'var(--theme-colors-foreground-muted)';
@@ -27,13 +27,10 @@ const AlbumDetailRoute = () => {
const { albumBackground, albumBackgroundBlur } = useAlbumBackground();
const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer();
const serverId = useCurrentServerId();
const location = useLocation();
const detailQuery = useQuery({
...albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
placeholderData: location.state?.item,
const detailQuery = useSuspenseQuery({
...albumQueries.detail({ query: { id: albumId }, serverId }),
});
const imageUrl =
@@ -65,9 +62,7 @@ const AlbumDetailRoute = () => {
itemType={LibraryItem.ALBUM}
variant="default"
/>
<LibraryHeaderBar.Title>
{detailQuery?.data?.name}
</LibraryHeaderBar.Title>
<LibraryHeaderBar.Title>{detailQuery.data.name}</LibraryHeaderBar.Title>
</LibraryHeaderBar>
),
offset: 200,
src/renderer/features/albums/routes/dummy-album-detail-route.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Fragment } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, Link, useParams } from 'react-router';
@@ -39,7 +39,7 @@ const DummyAlbumDetailRoute = () => {
const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer();
const queryKey = queryKeys.songs.detail(server?.id || '', albumId);
const detailQuery = useQuery({
const detailQuery = useSuspenseQuery({
queryFn: ({ signal }) => {
return api.controller.getSongDetail({
apiClientProps: { serverId: server?.id || '', signal },
@@ -52,7 +52,7 @@ const DummyAlbumDetailRoute = () => {
const { background, colorId } = useFastAverageColor({
id: albumId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
srcLoaded: Boolean(detailQuery.data?.imageUrl),
});
const { addToQueueByFetch } = usePlayer();
const playButtonBehavior = usePlayButtonBehavior();
src/renderer/features/artists/routes/album-artist-detail-favorite-songs-list-route.tsx
+15 -17
View File
@@ -1,4 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { useSuspenseQueries } from '@tanstack/react-query';
import { useMemo } from 'react';
import { useParams } from 'react-router';
@@ -35,20 +35,18 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
const server = useCurrentServer();
const pageKey = LibraryItem.SONG;
const detailQuery = useQuery(
artistsQueries.albumArtistDetail({
query: { id: routeId },
serverId: server?.id,
}),
);
const favoriteSongsQuery = useQuery(
artistsQueries.favoriteSongs({
options: { enabled: !!detailQuery?.data?.name },
query: { artistId: routeId },
serverId: server?.id,
}),
);
const [detailQuery, favoriteSongsQuery] = useSuspenseQueries({
queries: [
artistsQueries.albumArtistDetail({
query: { id: routeId },
serverId: server?.id,
}),
artistsQueries.favoriteSongs({
query: { artistId: routeId },
serverId: server?.id,
}),
],
});
const songs = useMemo(
() => favoriteSongsQuery?.data?.items || [],
@@ -168,7 +166,7 @@ const AlbumArtistDetailFavoriteSongsListRoute = () => {
);
};
const AlbumArtistDetailTopSongsListRouteWithBoundary = () => {
const AlbumArtistDetailFavoriteSongsListRouteWithBoundary = () => {
return (
<PageErrorBoundary>
<AlbumArtistDetailFavoriteSongsListRoute />
@@ -176,4 +174,4 @@ const AlbumArtistDetailTopSongsListRouteWithBoundary = () => {
);
};
export default AlbumArtistDetailTopSongsListRouteWithBoundary;
export default AlbumArtistDetailFavoriteSongsListRouteWithBoundary;
src/renderer/features/artists/routes/album-artist-detail-top-songs-list-route.tsx
+3 -4
View File
@@ -1,4 +1,4 @@
import { useQuery } from '@tanstack/react-query';
import { useSuspenseQuery } from '@tanstack/react-query';
import { useMemo } from 'react';
import { useParams } from 'react-router';
@@ -34,16 +34,15 @@ const AlbumArtistDetailTopSongsListRoute = () => {
key: 'album-artist-top-songs-query-type',
});
const detailQuery = useQuery(
const detailQuery = useSuspenseQuery(
artistsQueries.albumArtistDetail({
query: { id: routeId },
serverId: server?.id,
}),
);
const topSongsQuery = useQuery(
const topSongsQuery = useSuspenseQuery(
artistsQueries.topSongs({
options: { enabled: !!detailQuery?.data?.name },
query: {
artist: detailQuery?.data?.name || '',
artistId: routeId,
src/renderer/features/playlists/components/playlist-query-editor.tsx
+3 -2
View File
@@ -1,5 +1,6 @@
import type { UseSuspenseQueryResult } from '@tanstack/react-query';
import { closeAllModals, openModal } from '@mantine/modals';
import { useQuery } from '@tanstack/react-query';
import { useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -25,7 +26,7 @@ import { toast } from '/@/shared/components/toast/toast';
import { SongListSort } from '/@/shared/types/domain-types';
export interface PlaylistQueryEditorProps {
detailQuery: ReturnType<typeof useQuery<any>>;
detailQuery: UseSuspenseQueryResult<any, Error>;
handleSave: (
filter: Record<string, any>,
extraFilters: {
src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx
+4 -8
View File
@@ -1,8 +1,8 @@
import { closeAllModals, openModal } from '@mantine/modals';
import { useQuery } from '@tanstack/react-query';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Suspense, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { generatePath, useLocation, useNavigate, useParams } from 'react-router';
import { generatePath, useNavigate, useParams } from 'react-router';
import { ListContext, useListContext } from '/@/renderer/context/list-context';
import { playlistsQueries } from '/@/renderer/features/playlists/api/playlists-api';
@@ -72,13 +72,11 @@ const PlaylistSongListFiltersSidebar = () => {
const PlaylistDetailSongListRoute = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const location = useLocation();
const { playlistId } = useParams() as { playlistId: string };
const server = useCurrentServer();
const detailQuery = useQuery({
const detailQuery = useSuspenseQuery({
...playlistsQueries.detail({ query: { id: playlistId }, serverId: server?.id }),
placeholderData: location.state?.item,
});
const deletePlaylistMutation = useDeletePlaylist({});
const updatePlaylistMutation = useUpdatePlaylist({});
@@ -212,9 +210,7 @@ const PlaylistDetailSongListRoute = () => {
};
const isSmartPlaylist = Boolean(
!detailQuery?.isLoading &&
detailQuery?.data?.rules &&
server?.type === ServerType.NAVIDROME,
detailQuery?.data?.rules && server?.type === ServerType.NAVIDROME,
);
const [showQueryBuilder, setShowQueryBuilder] = useState(false);
src/renderer/features/shared/components/animated-page.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ export const AnimatedPage = forwardRef(
<motion.main
className={styles.animatedPage}
ref={ref}
{...{ ...animationProps.fadeIn, transition: { duration: 0.3, ease: 'anticipate' } }}
{...{ ...animationProps.fadeIn, transition: { duration: 0.5, ease: 'anticipate' } }}
>
{children}
</motion.main>
src/renderer/layouts/default-layout.tsx
+1 -7
View File
@@ -1,12 +1,12 @@
import clsx from 'clsx';
import isElectron from 'is-electron';
import { lazy } from 'react';
import styles from './default-layout.module.css';
import { ContextMenuController } from '/@/renderer/features/context-menu/context-menu-controller';
import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
import { WindowBar } from '/@/renderer/layouts/window-bar';
import { useSettingsStore, useWindowBarStyle } from '/@/renderer/store/settings.store';
import { Platform, PlayerType } from '/@/shared/types/types';
@@ -18,12 +18,6 @@ if (!isElectron()) {
});
}
const WindowBar = lazy(() =>
import('/@/renderer/layouts/window-bar').then((module) => ({
default: module.WindowBar,
})),
);
interface DefaultLayoutProps {
shell?: boolean;
}
src/renderer/layouts/mobile-layout/mobile-layout.tsx
+5 -2
View File
@@ -1,6 +1,6 @@
import clsx from 'clsx';
import { AnimatePresence } from 'motion/react';
import { lazy } from 'react';
import { lazy, Suspense } from 'react';
import { Outlet } from 'react-router';
import styles from './mobile-layout.module.css';
@@ -13,6 +13,7 @@ import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
import { useFullScreenPlayerOverlayState, useWindowBarStyle } from '/@/renderer/store';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Drawer } from '/@/shared/components/drawer/drawer';
import { Spinner } from '/@/shared/components/spinner/spinner';
import { useDisclosure } from '/@/shared/hooks/use-disclosure';
import { Platform } from '/@/shared/types/types';
@@ -53,7 +54,9 @@ export const MobileLayout = ({ shell }: MobileLayoutProps) => {
variant="subtle"
/>
<main className={styles.mainContent}>
<Outlet />
<Suspense fallback={<Spinner container />}>
<Outlet />
</Suspense>
</main>
<PlayerBar />
</div>