vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 12:30:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Kendall Garner
2025-07-07 20:11:32 -07:00
parent e00aeb2b67
commit 49bb42a298
3 changed files with 54 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/image/image.tsx
+35 -26
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';
@@ -44,33 +45,41 @@ 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}>
{inView && (
<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={src}
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>
);
}