add image unloader to sidebar image when no image available

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

@@ -30,6 +30,7 @@ import {
 import { Accordion } from '/@/shared/components/accordion/accordion';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Group } from '/@/shared/components/group/group';
+import { ImageUnloader } from '/@/shared/components/image/image';
 import { ScrollArea } from '/@/shared/components/scroll-area/scroll-area';
 import { Text } from '/@/shared/components/text/text';
 import { Tooltip } from '/@/shared/components/tooltip/tooltip';
@@ -190,11 +191,15 @@ export const Sidebar = () => {
                             })}
                             openDelay={500}
                         >
-                            <img
-                                className={styles.sidebarImage}
-                                loading="eager"
-                                src={upsizedImageUrl || undefined}
-                            />
+                            {upsizedImageUrl ? (
+                                <img
+                                    className={styles.sidebarImage}
+                                    loading="eager"
+                                    src={upsizedImageUrl}
+                                />
+                            ) : (
+                                <ImageUnloader />
+                            )}
                         </Tooltip>
                         <ActionIcon
                             icon="arrowDownS"

src/shared/components/image/image.tsx

@@ -31,7 +31,7 @@ interface ImageUnloaderProps {
     className?: string;
 }
 
-const FALLBACK_SVG =
+export const FALLBACK_SVG =
     'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
 
 export function Image({
@@ -110,7 +110,7 @@ const ImageContainer = forwardRef(
     },
 );
 
-function ImageLoader({ className }: ImageLoaderProps) {
+export function ImageLoader({ className }: ImageLoaderProps) {
     return (
         <Skeleton
             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 (
         <div className={clsx(styles.unloader, className)}>
             <Icon color="default" icon="emptyImage" size="xl" />