vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-10 04:30:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add image unloader to sidebar image when no image available

Browse Source
This commit is contained in:
jeffvli
2025-11-24 09:43:10 -08:00
parent 04c2bec58f
commit 1b8afe3134
2 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/sidebar/components/sidebar.tsx
+10 -5
View File
@@ -30,6 +30,7 @@ import {
import { Accordion } from '/@/shared/components/accordion/accordion'; import { Accordion } from '/@/shared/components/accordion/accordion';
import { ActionIcon } from '/@/shared/components/action-icon/action-icon'; import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
import { Group } from '/@/shared/components/group/group'; import { Group } from '/@/shared/components/group/group';
import { ImageUnloader } from '/@/shared/components/image/image';
import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area'; import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
import { Text } from '/@/shared/components/text/text'; import { Text } from '/@/shared/components/text/text';
import { Tooltip } from '/@/shared/components/tooltip/tooltip'; import { Tooltip } from '/@/shared/components/tooltip/tooltip';
@@ -190,11 +191,15 @@ export const Sidebar = () => {
})} })}
openDelay={500} openDelay={500}
> >
<img {upsizedImageUrl ? (
className={styles.sidebarImage} <img
loading="eager" className={styles.sidebarImage}
src={upsizedImageUrl || undefined} loading="eager"
/> src={upsizedImageUrl}
/>
) : (
<ImageUnloader />
)}
</Tooltip> </Tooltip>
<ActionIcon <ActionIcon
icon="arrowDownS" icon="arrowDownS"
src/shared/components/image/image.tsx
+3 -3
View File
@@ -31,7 +31,7 @@ interface ImageUnloaderProps {
className?: string; className?: string;
} }
const FALLBACK_SVG = export const FALLBACK_SVG =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='; 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
export function Image({ export function Image({
@@ -110,7 +110,7 @@ const ImageContainer = forwardRef(
}, },
); );
function ImageLoader({ className }: ImageLoaderProps) { export function ImageLoader({ className }: ImageLoaderProps) {
return ( return (
<Skeleton <Skeleton
className={clsx(styles.skeleton, styles.loader, className)} className={clsx(styles.skeleton, styles.loader, className)}
@@ -119,7 +119,7 @@ function ImageLoader({ className }: ImageLoaderProps) {
); );
} }
function ImageUnloader({ className }: ImageUnloaderProps) { export function ImageUnloader({ className }: ImageUnloaderProps) {
return ( return (
<div className={clsx(styles.unloader, className)}> <div className={clsx(styles.unloader, className)}>
<Icon color="default" icon="emptyImage" size="xl" /> <Icon color="default" icon="emptyImage" size="xl" />