antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33: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

70
src/renderer/features/shared/components/library-header.tsx
View file

@ -14,18 +14,19 @@ import { useGeneralSettings } from '/@/renderer/store';
import { LibraryItem } from '/@/shared/types/domain-types';
interface LibraryHeaderProps {
background: string;
background?: string;
blur?: number;
children?: ReactNode;
imagePlaceholderUrl?: null | string;
imageUrl?: null | string;
item: { route: string; type: LibraryItem };
loading?: boolean;
title: string;
}
export const LibraryHeader = forwardRef(
(
{ background, blur, children, imageUrl, item, title }: LibraryHeaderProps,
{ background, blur, children, imageUrl, item, loading, title }: LibraryHeaderProps,
ref: Ref<HTMLDivElement>,
) => {
const { t } = useTranslation();
@ -106,38 +107,41 @@ export const LibraryHeader = forwardRef(
style={{ cursor: 'pointer' }}
tabIndex={0}
>
{imageUrl && !isImageError ? (
<img
alt="cover"
className={styles.image}
onError={onImageError}
// placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={imageUrl}
style={{ height: '' }}
/>
) : (
<ItemImagePlaceholder itemType={item.type} />
)}
</div>
<div className={styles.metadataSection}>
<Group>
<h2>
<Text
$link
component={Link}
to={item.route}
tt="uppercase"
weight={600}
>
{itemTypeString()}
</Text>
</h2>
</Group>
<h1 className={styles.title}>
<AutoTextSize mode="box">{title}</AutoTextSize>
</h1>
{children}
{!loading &&
(imageUrl && !isImageError ? (
<img
alt="cover"
className={styles.image}
onError={onImageError}
// placeholder={imagePlaceholderUrl || 'var(--placeholder-bg)'}
src={imageUrl}
style={{ height: '' }}
/>
) : (
<ItemImagePlaceholder itemType={item.type} />
))}
</div>
{title && (
<div className={styles.metadataSection}>
<Group>
<h2>
<Text
$link
component={Link}
to={item.route}
tt="uppercase"
weight={600}
>
{itemTypeString()}
</Text>
</h2>
</Group>
<h1 className={styles.title}>
<AutoTextSize mode="box">{title}</AutoTextSize>
</h1>
{children}
</div>
)}
</div>
);
},