From f5af1c314c2545a1973867a892ed8199f691ee88 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Wed, 3 Sep 2025 19:56:51 -0700
Subject: [PATCH] add image loader/unloader and only toggle source

---
 .../player/hooks/use-handle-playqueue-add.ts  |  6 +-
 .../add-to-playlist-context-modal.tsx         |  4 +-
 src/shared/components/image/image.tsx         | 57 ++++++++++---------
 3 files changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/renderer/features/player/hooks/use-handle-playqueue-add.ts b/src/renderer/features/player/hooks/use-handle-playqueue-add.ts
index b9597b8d..8a8ccbdc 100644
--- a/src/renderer/features/player/hooks/use-handle-playqueue-add.ts
+++ b/src/renderer/features/player/hooks/use-handle-playqueue-add.ts
@@ -78,7 +78,7 @@ export const useHandlePlayQueueAdd = () => {
             // Allow this to be undefined for "play shuffled". If undefined, default to 0,
             // otherwise, choose the selected item in the queue
             let initialSongIndex: number | undefined;
-            let toastId: string | null = null;
+            let toastId: null | string = null;
 
             if (byItemType) {
                 let songList: SongListResponse | undefined;
@@ -148,9 +148,9 @@ export const useHandlePlayQueueAdd = () => {
 
                     clearTimeout(timeoutIds.current[fetchId] as ReturnType<typeof setTimeout>);
                     delete timeoutIds.current[fetchId];
-                    if(toastId){
+                    if (toastId) {
                         toast.hide(toastId);
-                    }                 
+                    }
                 } catch (err: any) {
                     if (instanceOfCancellationError(err)) {
                         return null;
diff --git a/src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx b/src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx
index 0f24ca23..4732a758 100644
--- a/src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx
+++ b/src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx
@@ -230,19 +230,19 @@ export const AddToPlaylistContextModal = ({
                         clearable
                         data={playlistSelect}
                         disabled={playlistList.isLoading}
+                        dropdownOpened={isDropdownOpened}
                         label={t('form.addToPlaylist.input', {
                             context: 'playlists',
                             postProcess: 'titleCase',
                         })}
                         searchable
                         size="md"
-                        dropdownOpened={isDropdownOpened}
                         {...form.getInputProps('playlistId')}
-                        onClick={() => setIsDropdownOpened(true)}
                         onChange={(e) => {
                             setIsDropdownOpened(false);
                             form.getInputProps('playlistId').onChange(e);
                         }}
+                        onClick={() => setIsDropdownOpened(true)}
                     />
                     <Switch
                         label={t('form.addToPlaylist.input', {
diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index 41c8d334..61865177 100644
--- a/src/shared/components/image/image.tsx
+++ b/src/shared/components/image/image.tsx
@@ -34,6 +34,9 @@ interface ImageUnloaderProps {
     className?: string;
 }
 
+const FALLBACK_SVG =
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
+
 export function Image({
     className,
     containerClassName,
@@ -48,35 +51,33 @@ export function Image({
             <InView>
                 {({ inView, ref }) => (
                     <div ref={ref}>
-                        {inView && (
-                            <Img
-                                className={clsx(styles.image, className)}
-                                container={(children) => (
-                                    <ImageContainer
-                                        className={containerClassName}
-                                        enableAnimation={enableAnimation}
-                                        {...imageContainerProps}
-                                    >
-                                        {children}
+                        <Img
+                            className={clsx(styles.image, className)}
+                            container={(children) => (
+                                <ImageContainer
+                                    className={containerClassName}
+                                    enableAnimation={enableAnimation}
+                                    {...imageContainerProps}
+                                >
+                                    {children}
+                                </ImageContainer>
+                            )}
+                            loader={
+                                includeLoader ? (
+                                    <ImageContainer className={containerClassName}>
+                                        <ImageLoader className={className} />
                                     </ImageContainer>
-                                )}
-                                loader={
-                                    includeLoader ? (
-                                        <ImageContainer className={containerClassName}>
-                                            <ImageLoader className={className} />
-                                        </ImageContainer>
-                                    ) : null
-                                }
-                                src={src}
-                                unloader={
-                                    includeUnloader ? (
-                                        <ImageContainer className={containerClassName}>
-                                            <ImageUnloader className={className} />
-                                        </ImageContainer>
-                                    ) : null
-                                }
-                            />
-                        )}
+                                ) : null
+                            }
+                            src={inView ? src : FALLBACK_SVG}
+                            unloader={
+                                includeUnloader ? (
+                                    <ImageContainer className={containerClassName}>
+                                        <ImageUnloader className={className} />
+                                    </ImageContainer>
+                                ) : null
+                            }
+                        />
                     </div>
                 )}
             </InView>