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

Revert "refactor image to only render in viewport once"

Browse Source 
This reverts commit 746951b55f.
This commit is contained in:
jeffvli
2026-01-14 18:46:09 -08:00
parent c1c07b861e
commit 1850cc68d8
1 changed files with 30 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/components/image/image.tsx
+30 -57
View File
@@ -6,8 +6,6 @@ import {
type ImgHTMLAttributes,
memo,
ReactNode,
useEffect,
useState,
} from 'react';
import { Img } from 'react-image';
@@ -45,25 +43,6 @@ interface ImageUnloaderProps {
export const FALLBACK_SVG =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4=';
interface ImageViewportWrapperProps {
children: (shouldRenderImage: boolean, ref: ForwardedRef<HTMLDivElement>) => ReactNode;
}
const ImageViewportWrapper = ({ children }: ImageViewportWrapperProps) => {
const [hasEnteredViewport, setHasEnteredViewport] = useState(false);
const { inViewport, ref } = useInViewport();
useEffect(() => {
if (inViewport && !hasEnteredViewport) {
setHasEnteredViewport(true);
}
}, [inViewport, hasEnteredViewport]);
const shouldRenderImage = hasEnteredViewport || inViewport;
return <>{children(shouldRenderImage, ref)}</>;
};
export function BaseImage({
className,
containerClassName,
@@ -75,44 +54,38 @@ export function BaseImage({
unloaderIcon = 'emptyImage',
...props
}: ImageProps) {
const { inViewport, ref } = useInViewport();
return (
<ImageViewportWrapper>
{(shouldRenderImage, viewportRef) => {
return (
<ImageContainer
className={containerClassName}
enableAnimation={enableAnimation}
ref={viewportRef}
{...imageContainerProps}
>
{shouldRenderImage && src ? (
<Img
className={clsx(styles.image, className, {
[styles.animated]: enableAnimation,
})}
decoding="async"
fetchPriority="high"
loader={
includeLoader ? <ImageLoader className={className} /> : null
}
loading="eager"
src={src}
unloader={
includeUnloader ? (
<ImageUnloader className={className} icon={unloaderIcon} />
) : null
}
{...props}
/>
) : !src ? (
<ImageContainer
className={containerClassName}
enableAnimation={enableAnimation}
ref={ref}
{...imageContainerProps}
>
{inViewport && src ? (
<Img
className={clsx(styles.image, className, {
[styles.animated]: enableAnimation,
})}
decoding="async"
fetchPriority="high"
loader={includeLoader ? <ImageLoader className={className} /> : null}
loading="eager"
src={src}
unloader={
includeUnloader ? (
<ImageUnloader className={className} icon={unloaderIcon} />
) : (
<ImageLoader className={className} />
)}
</ImageContainer>
);
}}
</ImageViewportWrapper>
) : null
}
{...props}
/>
) : !src ? (
<ImageUnloader className={className} icon={unloaderIcon} />
) : (
<ImageLoader className={className} />
)}
</ImageContainer>
);
}