Merge pull request #1002 from jeffvli/react-image-lazy-loaded

Use lazy loading (react-intersection-observer) for image loading

package.json

@@ -112,6 +112,7 @@
         "react-i18next": "^11.18.6",
         "react-icons": "^5.5.0",
         "react-image": "^4.1.0",
+        "react-intersection-observer": "^9.16.0",
         "react-loading-skeleton": "^3.5.0",
         "react-player": "^2.11.0",
         "react-router": "^6.16.0",

pnpm-lock.yaml

@@ -182,6 +182,9 @@ importers:
       react-image:
         specifier: ^4.1.0
         version: 4.1.0(@babel/runtime@7.27.1)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      react-intersection-observer:
+        specifier: ^9.16.0
+        version: 9.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       react-loading-skeleton:
         specifier: ^3.5.0
         version: 3.5.0(react@19.1.0)
@@ -3654,6 +3657,15 @@ packages:
       react: '>=16.8'
       react-dom: '>=16.8'
 
+  react-intersection-observer@9.16.0:
+    resolution: {integrity: sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -8467,6 +8479,12 @@ snapshots:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
 
+  react-intersection-observer@9.16.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+    optionalDependencies:
+      react-dom: 19.1.0(react@19.1.0)
+
   react-is@16.13.1: {}
 
   react-loading-skeleton@3.5.0(react@19.1.0):

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;

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

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { motion, MotionConfigProps } from 'motion/react';
 import { type ImgHTMLAttributes } from 'react';
 import { Img } from 'react-image';
+import { InView } from 'react-intersection-observer';
 
 import styles from './image.module.css';
 
@@ -33,6 +34,9 @@ interface ImageUnloaderProps {
     className?: string;
 }
 
+const FALLBACK_SVG =
+    'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
+
 export function Image({
     className,
     containerClassName,
@@ -44,33 +48,39 @@ export function Image({
 }: ImageProps) {
     if (src) {
         return (
-            <Img
+            <InView>
-                className={clsx(styles.image, className)}
+                {({ inView, ref }) => (
-                container={(children) => (
+                    <div ref={ref}>
-                    <ImageContainer
+                        <Img
-                        className={containerClassName}
+                            className={clsx(styles.image, className)}
-                        enableAnimation={enableAnimation}
+                            container={(children) => (
-                        {...imageContainerProps}
+                                <ImageContainer
-                    >
+                                    className={containerClassName}
-                        {children}
+                                    enableAnimation={enableAnimation}
-                    </ImageContainer>
+                                    {...imageContainerProps}
+                                >
+                                    {children}
+                                </ImageContainer>
+                            )}
+                            loader={
+                                includeLoader ? (
+                                    <ImageContainer className={containerClassName}>
+                                        <ImageLoader className={className} />
+                                    </ImageContainer>
+                                ) : null
+                            }
+                            src={inView ? src : FALLBACK_SVG}
+                            unloader={
+                                includeUnloader ? (
+                                    <ImageContainer className={containerClassName}>
+                                        <ImageUnloader className={className} />
+                                    </ImageContainer>
+                                ) : null
+                            }
+                        />
+                    </div>
                 )}
-                loader={
+            </InView>
-                    includeLoader ? (
-                        <ImageContainer className={containerClassName}>
-                            <ImageLoader className={className} />
-                        </ImageContainer>
-                    ) : null
-                }
-                src={src}
-                unloader={
-                    includeUnloader ? (
-                        <ImageContainer className={containerClassName}>
-                            <ImageUnloader className={className} />
-                        </ImageContainer>
-                    ) : null
-                }
-            />
         );
     }