Optimize various pages

src/renderer/features/home/routes/home-route.tsx

@@ -1,11 +1,10 @@
 import { useMemo, useRef } from 'react';
-import { Box, Stack } from '@mantine/core';
+import { Center, Stack } from '@mantine/core';
 import { AlbumListSort, LibraryItem, ServerType, SortOrder } from '/@/renderer/api/types';
-import { FeatureCarousel, NativeScrollArea } from '/@/renderer/components';
+import { FeatureCarousel, NativeScrollArea, Spinner } from '/@/renderer/components';
 import { useAlbumList } from '/@/renderer/features/albums';
 import { useRecentlyPlayed } from '/@/renderer/features/home/queries/recently-played-query';
 import { AnimatedPage, LibraryHeaderBar } from '/@/renderer/features/shared';
-import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, useWindowSettings } from '/@/renderer/store';
 import { SwiperGridCarousel } from '/@/renderer/components/grid-carousel';
@@ -14,8 +13,7 @@ import { Platform } from '/@/renderer/types';
 const HomeRoute = () => {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
   const server = useCurrentServer();
-  const cq = useContainerQuery();
+  const itemsPerPage = 15;
-  const itemsPerPage = 25;
   const { windowBarStyle } = useWindowSettings();
 
   const feature = useAlbumList({
@@ -63,6 +61,9 @@ const HomeRoute = () => {
   });
 
   const recentlyAdded = useAlbumList({
+    options: {
+      staleTime: 0,
+    },
     query: {
       limit: itemsPerPage,
       sortBy: AlbumListSort.RECENTLY_ADDED,
@@ -74,7 +75,7 @@ const HomeRoute = () => {
 
   const mostPlayed = useAlbumList({
     options: {
-      staleTime: 1000 * 60 * 5,
+      staleTime: 0,
     },
     query: {
       limit: itemsPerPage,
@@ -85,16 +86,31 @@ const HomeRoute = () => {
     serverId: server?.id,
   });
 
+  const isLoading =
+    random.isFetching ||
+    recentlyPlayed.isFetching ||
+    recentlyAdded.isFetching ||
+    mostPlayed.isFetching;
+
+  if (isLoading) {
+    return (
+      <Center
+        h="100%"
+        w="100%"
+      >
+        <Spinner />
+      </Center>
+    );
+  }
+
   const carousels = [
     {
       data: random?.data?.items,
-      loading: random?.isLoading,
       title: 'Explore from your library',
       uniqueId: 'random',
     },
     {
       data: recentlyPlayed?.data?.items,
-      loading: recentlyPlayed?.isLoading,
       pagination: {
         itemsPerPage,
       },
@@ -103,7 +119,6 @@ const HomeRoute = () => {
     },
     {
       data: recentlyAdded?.data?.items,
-      loading: recentlyAdded?.isLoading,
       pagination: {
         itemsPerPage,
       },
@@ -112,7 +127,6 @@ const HomeRoute = () => {
     },
     {
       data: mostPlayed?.data?.items,
-      loading: mostPlayed?.isLoading,
       pagination: {
         itemsPerPage,
       },
@@ -135,58 +149,52 @@ const HomeRoute = () => {
           offset: ['0px', '200px'],
         }}
       >
-        <Box
+        <Stack
-          ref={cq.ref}
           mb="5rem"
           pt={windowBarStyle === Platform.WEB ? '5rem' : '3rem'}
           px="2rem"
+          spacing="lg"
         >
-          <Stack spacing="lg">
+          <FeatureCarousel data={featureItemsWithImage} />
-            <FeatureCarousel data={featureItemsWithImage} />
+          {carousels
-            {carousels
+            .filter((carousel) => {
-              .filter((carousel) => {
+              if (server?.type === ServerType.JELLYFIN && carousel.uniqueId === 'recentlyPlayed') {
-                if (
+                return null;
-                  server?.type === ServerType.JELLYFIN &&
+              }
-                  carousel.uniqueId === 'recentlyPlayed'
-                ) {
-                  return null;
-                }
 
-                return carousel;
+              return carousel;
-              })
+            })
-              .map((carousel) => (
+            .map((carousel) => (
-                <SwiperGridCarousel
+              <SwiperGridCarousel
-                  key={`carousel-${carousel.uniqueId}`}
+                key={`carousel-${carousel.uniqueId}`}
-                  cardRows={[
+                cardRows={[
-                    {
+                  {
-                      property: 'name',
+                    property: 'name',
-                      route: {
+                    route: {
-                        route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+                      route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-                        slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+                      slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
-                      },
                     },
-                    {
+                  },
-                      arrayProperty: 'name',
+                  {
-                      property: 'albumArtists',
+                    arrayProperty: 'name',
-                      route: {
+                    property: 'albumArtists',
-                        route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
+                    route: {
-                        slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
+                      route: AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL,
-                      },
+                      slugs: [{ idProperty: 'id', slugProperty: 'albumArtistId' }],
                     },
-                  ]}
+                  },
-                  data={carousel.data}
+                ]}
-                  isLoading={carousel.loading}
+                data={carousel.data}
-                  itemType={LibraryItem.ALBUM}
+                itemType={LibraryItem.ALBUM}
-                  route={{
+                route={{
-                    route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+                  route: AppRoute.LIBRARY_ALBUMS_DETAIL,
-                    slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
+                  slugs: [{ idProperty: 'id', slugProperty: 'albumId' }],
-                  }}
+                }}
-                  title={{ label: carousel.title }}
+                title={{ label: carousel.title }}
-                  uniqueId={carousel.uniqueId}
+                uniqueId={carousel.uniqueId}
-                />
+              />
-              ))}
+            ))}
-          </Stack>
+        </Stack>
-        </Box>
       </NativeScrollArea>
     </AnimatedPage>
   );

src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx

@@ -1,6 +1,7 @@
 import { createPolymorphicComponent, Flex } from '@mantine/core';
 import { motion } from 'framer-motion';
 import { forwardRef } from 'react';
+import { useMatch } from 'react-router';
 import styled from 'styled-components';
 import { Text } from '/@/renderer/components';
 
@@ -62,29 +63,32 @@ const ActiveTabIndicator = styled(motion.div)`
 `;
 
 interface CollapsedSidebarItemProps {
-  active?: boolean;
   activeIcon: React.ReactNode;
   disabled?: boolean;
   icon: React.ReactNode;
   label: string;
+  route?: string;
 }
 
 const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
-  ({ active, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
+  ({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
+    const match = useMatch(route || '/null');
+    const isMatch = Boolean(match);
+
     return (
       <Container
         ref={ref}
-        $active={active}
+        $active={Boolean(match)}
         $disabled={disabled}
         align="center"
         direction="column"
         {...props}
       >
-        {active && <ActiveTabIndicator layoutId="active-tab-indicator" />}
+        {isMatch ? <ActiveTabIndicator /> : null}
-        {active ? activeIcon : icon}
+        {isMatch ? activeIcon : icon}
         <TextWrapper>
           <Text
-            $secondary={!active}
+            $secondary={!isMatch}
             fw="600"
             overflow="hidden"
             size="xs"

src/renderer/features/sidebar/components/collapsed-sidebar.tsx

@@ -19,8 +19,7 @@ import {
   RiSearchLine,
   RiSearchFill,
 } from 'react-icons/ri';
-import { useLocation } from 'react-router';
+import { NavLink } from 'react-router-dom';
-import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { DropdownMenu, ScrollArea } from '/@/renderer/components';
 import { CollapsedSidebarItem } from '/@/renderer/features/sidebar/components/collapsed-sidebar-item';
@@ -41,7 +40,6 @@ const SidebarContainer = styled(motion.div)<{ windowBarStyle: Platform }>`
 `;
 
 export const CollapsedSidebar = () => {
-  const location = useLocation();
   const { windowBarStyle } = useWindowSettings();
   const { open } = useCommandPalette();
 
@@ -71,41 +69,41 @@ export const CollapsedSidebar = () => {
           onClick={open}
         />
         <CollapsedSidebarItem
-          active={location.pathname === AppRoute.HOME}
           activeIcon={<RiHome6Fill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiHome6Line size="25" />}
           label="Home"
+          route={AppRoute.HOME}
           to={AppRoute.HOME}
         />
         <CollapsedSidebarItem
-          active={location.pathname === AppRoute.LIBRARY_ALBUMS}
           activeIcon={<RiAlbumFill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiAlbumLine size="25" />}
           label="Albums"
+          route={AppRoute.LIBRARY_ALBUMS}
           to={AppRoute.LIBRARY_ALBUMS}
         />
         <CollapsedSidebarItem
-          active={location.pathname === AppRoute.LIBRARY_SONGS}
           activeIcon={<RiMusic2Fill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiMusic2Line size="25" />}
           label="Tracks"
+          route={AppRoute.LIBRARY_SONGS}
           to={AppRoute.LIBRARY_SONGS}
         />
         <CollapsedSidebarItem
-          active={location.pathname === AppRoute.LIBRARY_ALBUM_ARTISTS}
           activeIcon={<RiUserVoiceFill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiUserVoiceLine size="25" />}
           label="Artists"
+          route={AppRoute.LIBRARY_ALBUM_ARTISTS}
           to={AppRoute.LIBRARY_ALBUM_ARTISTS}
         />
         <CollapsedSidebarItem
           disabled
           activeIcon={<RiFlag2Fill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiFlag2Line size="25" />}
           label="Genres"
           to={AppRoute.LIBRARY_GENRES}
@@ -113,17 +111,17 @@ export const CollapsedSidebar = () => {
         <CollapsedSidebarItem
           disabled
           activeIcon={<RiFolder3Fill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiFolder3Line size="25" />}
           label="Folders"
           to={AppRoute.LIBRARY_FOLDERS}
         />
         <CollapsedSidebarItem
-          active={location.pathname === AppRoute.PLAYLISTS}
           activeIcon={<RiPlayListFill size="25" />}
-          component={Link}
+          component={NavLink}
           icon={<RiPlayListLine size="25" />}
           label="Playlists"
+          route={AppRoute.PLAYLISTS}
           to={AppRoute.PLAYLISTS}
         />
       </ScrollArea>

src/renderer/layouts/default-layout/main-content.tsx

@@ -9,6 +9,8 @@ import { constrainSidebarWidth, constrainRightSidebarWidth } from '/@/renderer/u
 import { LeftSidebar } from '/@/renderer/layouts/default-layout/left-sidebar';
 import { FullScreenOverlay } from '/@/renderer/layouts/default-layout/full-screen-overlay';
 import { RightSidebar } from '/@/renderer/layouts/default-layout/right-sidebar';
+import { Center } from '@mantine/core';
+import { Spinner } from '/@/renderer/components';
 
 const SideDrawerQueue = lazy(() =>
   import('/@/renderer/layouts/default-layout/side-drawer-queue').then((module) => ({
@@ -102,8 +104,8 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
       sidebarCollapsed={collapsed}
     >
       {!shell && (
-        <Suspense fallback={<></>}>
+        <>
-          {showQueueDrawerButton && <SideDrawerQueue />}
+          <Suspense fallback={<></>}>{showQueueDrawerButton && <SideDrawerQueue />}</Suspense>
           <FullScreenOverlay />
           <LeftSidebar
             isResizing={isResizing}
@@ -114,9 +116,18 @@ export const MainContent = ({ shell }: { shell?: boolean }) => {
             isResizing={isResizingRight}
             startResizing={startResizing}
           />
-        </Suspense>
+        </>
       )}
-      <Suspense fallback={<></>}>
+      <Suspense
+        fallback={
+          <Center
+            h="100%"
+            w="100%"
+          >
+            <Spinner />
+          </Center>
+        }
+      >
         <Outlet />
       </Suspense>
     </MainContentContainer>