antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source 
Use lazy loading (react-intersection-observer) for image loading
This commit is contained in:
Jeff 2025-09-03 21:43:55 -07:00 • committed by GitHub
commit 2260c0c02b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 60 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

18
pnpm-lock.yaml generated
View file

@ -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):

4
src/renderer/features/player/hooks/use-handle-playqueue-add.ts
View file

@ -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,7 +148,7 @@ 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) {

4
src/renderer/features/playlists/components/add-to-playlist-context-modal.tsx
View file

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

62
src/shared/components/image/image.tsx
View file

@ -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
className={clsx(styles.image, className)}
container={(children) => (
<ImageContainer
className={containerClassName}
enableAnimation={enableAnimation}
{...imageContainerProps}
>
{children}
</ImageContainer>
<InView>
{({ inView, ref }) => (
<div ref={ref}>
<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>
) : null
}
src={inView ? src : FALLBACK_SVG}
unloader={
includeUnloader ? (
<ImageContainer className={containerClassName}>
<ImageUnloader className={className} />
</ImageContainer>
) : null
}
/>
</div>
)}
loader={
includeLoader ? (
<ImageContainer className={containerClassName}>
<ImageLoader className={className} />
</ImageContainer>
) : null
}
src={src}
unloader={
includeUnloader ? (
<ImageContainer className={containerClassName}>
<ImageUnloader className={className} />
</ImageContainer>
) : null
}
/>
</InView>
);
}