From 17b1acad9dbacb4a065a8081cc245fc8d959b1a3 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Thu, 1 Jun 2023 20:08:43 -0700 Subject: [PATCH] Optimize various pages --- .../features/home/routes/home-route.tsx | 118 ++++++++++-------- .../components/collapsed-sidebar-item.tsx | 16 ++- .../sidebar/components/collapsed-sidebar.tsx | 28 ++--- .../layouts/default-layout/main-content.tsx | 19 ++- 4 files changed, 101 insertions(+), 80 deletions(-) diff --git a/src/renderer/features/home/routes/home-route.tsx b/src/renderer/features/home/routes/home-route.tsx index 9d98c4e5..dfcca762 100644 --- a/src/renderer/features/home/routes/home-route.tsx +++ b/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(null); const server = useCurrentServer(); - const cq = useContainerQuery(); - const itemsPerPage = 25; + const itemsPerPage = 15; 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 ( +
+ +
+ ); + } + 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'], }} > - - - - {carousels - .filter((carousel) => { - if ( - server?.type === ServerType.JELLYFIN && - carousel.uniqueId === 'recentlyPlayed' - ) { - return null; - } + + {carousels + .filter((carousel) => { + if (server?.type === ServerType.JELLYFIN && carousel.uniqueId === 'recentlyPlayed') { + return null; + } - return carousel; - }) - .map((carousel) => ( - ( + - ))} - - + }, + ]} + data={carousel.data} + itemType={LibraryItem.ALBUM} + route={{ + route: AppRoute.LIBRARY_ALBUMS_DETAIL, + slugs: [{ idProperty: 'id', slugProperty: 'albumId' }], + }} + title={{ label: carousel.title }} + uniqueId={carousel.uniqueId} + /> + ))} + ); diff --git a/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx b/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx index 135539eb..4f2b9995 100644 --- a/src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx +++ b/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( - ({ 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 ( - {active && } - {active ? activeIcon : icon} + {isMatch ? : null} + {isMatch ? activeIcon : icon} ` `; export const CollapsedSidebar = () => { - const location = useLocation(); const { windowBarStyle } = useWindowSettings(); const { open } = useCommandPalette(); @@ -71,41 +69,41 @@ export const CollapsedSidebar = () => { onClick={open} /> } - component={Link} + component={NavLink} icon={} label="Home" + route={AppRoute.HOME} to={AppRoute.HOME} /> } - component={Link} + component={NavLink} icon={} label="Albums" + route={AppRoute.LIBRARY_ALBUMS} to={AppRoute.LIBRARY_ALBUMS} /> } - component={Link} + component={NavLink} icon={} label="Tracks" + route={AppRoute.LIBRARY_SONGS} to={AppRoute.LIBRARY_SONGS} /> } - component={Link} + component={NavLink} icon={} label="Artists" + route={AppRoute.LIBRARY_ALBUM_ARTISTS} to={AppRoute.LIBRARY_ALBUM_ARTISTS} /> } - component={Link} + component={NavLink} icon={} label="Genres" to={AppRoute.LIBRARY_GENRES} @@ -113,17 +111,17 @@ export const CollapsedSidebar = () => { } - component={Link} + component={NavLink} icon={} label="Folders" to={AppRoute.LIBRARY_FOLDERS} /> } - component={Link} + component={NavLink} icon={} label="Playlists" + route={AppRoute.PLAYLISTS} to={AppRoute.PLAYLISTS} /> diff --git a/src/renderer/layouts/default-layout/main-content.tsx b/src/renderer/layouts/default-layout/main-content.tsx index 39f30ada..bd98a5ba 100644 --- a/src/renderer/layouts/default-layout/main-content.tsx +++ b/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 && ( - }> - {showQueueDrawerButton && } + <> + }>{showQueueDrawerButton && } { isResizing={isResizingRight} startResizing={startResizing} /> - + )} - }> + + + + } + >