re-add default suspense to album/artist routes

src/renderer/features/albums/routes/album-detail-route.tsx

@@ -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 = useSuspenseQuery({
-
+        ...albumQueries.detail({ query: { id: albumId }, serverId }),
-    const detailQuery = useQuery({
-        ...albumQueries.detail({ query: { id: albumId }, serverId: server?.id }),
-        placeholderData: location.state?.item,
     });
 
     const imageUrl =
@@ -65,9 +62,7 @@ const AlbumDetailRoute = () => {
                                 itemType={LibraryItem.ALBUM}
                                 variant="default"
                             />
-                            <LibraryHeaderBar.Title>
+                            <LibraryHeaderBar.Title>{detailQuery.data.name}</LibraryHeaderBar.Title>
-                                {detailQuery?.data?.name}
-                            </LibraryHeaderBar.Title>
                         </LibraryHeaderBar>
                     ),
                     offset: 200,

src/renderer/features/albums/routes/dummy-album-detail-route.tsx

@@ -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

@@ -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(
+    const [detailQuery, favoriteSongsQuery] = useSuspenseQueries({
-        artistsQueries.albumArtistDetail({
+        queries: [
-            query: { id: routeId },
+            artistsQueries.albumArtistDetail({
-            serverId: server?.id,
+                query: { id: routeId },
-        }),
+                serverId: server?.id,
-    );
+            }),
-
+            artistsQueries.favoriteSongs({
-    const favoriteSongsQuery = useQuery(
+                query: { artistId: routeId },
-        artistsQueries.favoriteSongs({
+                serverId: server?.id,
-            options: { enabled: !!detailQuery?.data?.name },
+            }),
-            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

@@ -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

@@ -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

@@ -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

@@ -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,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

@@ -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>