antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve library header loading

Browse source
This commit is contained in:
Kendall Garner 2025-06-20 17:57:15 -07:00
parent b8ceb174b3
commit b7fb7c7f94
No known key found for this signature in database
GPG key ID: 9355F387FE765C94
9 changed files with 59 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/li
import { useRef } from 'react';
import { useParams } from 'react-router';
import { NativeScrollArea, Spinner } from '/@/renderer/components';
import { NativeScrollArea } from '/@/renderer/components';
import { AlbumDetailContent } from '/@/renderer/features/albums/components/album-detail-content';
import { AlbumDetailHeader } from '/@/renderer/features/albums/components/album-detail-header';
import { useAlbumDetail } from '/@/renderer/features/albums/queries/album-detail-query';
@ -23,7 +23,7 @@ const AlbumDetailRoute = () => {
const { albumId } = useParams() as { albumId: string };
const server = useCurrentServer();
const detailQuery = useAlbumDetail({ query: { id: albumId }, serverId: server?.id });
const { color: backgroundColor, colorId } = useFastAverageColor({
const { background: backgroundColor, colorId } = useFastAverageColor({
id: albumId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
@ -41,10 +41,6 @@ const AlbumDetailRoute = () => {
});
};
if (!backgroundColor || colorId !== albumId) {
return <Spinner container />;
}
const backgroundUrl = detailQuery.data?.imageUrl || '';
const background = (albumBackground && `url(${backgroundUrl})`) || backgroundColor;
@ -70,6 +66,7 @@ const AlbumDetailRoute = () => {
background={{
background,
blur: (albumBackground && albumBackgroundBlur) || 0,
loading: !backgroundColor || colorId !== albumId,
}}
ref={headerRef}
/>

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

@ -9,7 +9,7 @@ import { styled } from 'styled-components';
import { api } from '/@/renderer/api';
import { queryKeys } from '/@/renderer/api/query-keys';
import { Button, Spinner, Spoiler, Text } from '/@/renderer/components';
import { Button, Spoiler, Text } from '/@/renderer/components';
import { useHandleGeneralContextMenu } from '/@/renderer/features/context-menu';
import { SONG_ALBUM_PAGE } from '/@/renderer/features/context-menu/context-menu-items';
import { usePlayQueueAdd } from '/@/renderer/features/player';
@ -55,7 +55,7 @@ const DummyAlbumDetailRoute = () => {
queryKey,
});
const { color: background, colorId } = useFastAverageColor({
const { background, colorId } = useFastAverageColor({
id: albumId,
src: detailQuery.data?.imageUrl,
srcLoaded: !detailQuery.isLoading,
@ -114,10 +114,6 @@ const DummyAlbumDetailRoute = () => {
});
};
if (!background || colorId !== albumId) {
return <Spinner container />;
}
const metadataItems = [
{
id: 'releaseYear',
@ -138,6 +134,7 @@ const DummyAlbumDetailRoute = () => {
background={background}
imageUrl={detailQuery?.data?.imageUrl}
item={{ route: AppRoute.LIBRARY_SONGS, type: LibraryItem.SONG }}
loading={!background || colorId !== albumId}
title={detailQuery?.data?.name || ''}
>
<Stack spacing="sm">