add image loader/unloader and only toggle source

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;

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', {

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,7 +51,6 @@ export function Image({
             <InView>
                 {({ inView, ref }) => (
                     <div ref={ref}>
-                        {inView && (
                         <Img
                             className={clsx(styles.image, className)}
                             container={(children) => (
@@ -67,7 +69,7 @@ export function Image({
                                     </ImageContainer>
                                 ) : null
                             }
-                                src={src}
+                            src={inView ? src : FALLBACK_SVG}
                             unloader={
                                 includeUnloader ? (
                                     <ImageContainer className={containerClassName}>
@@ -76,7 +78,6 @@ export function Image({
                                 ) : null
                             }
                         />
-                        )}
                     </div>
                 )}
             </InView>