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, type ImgHTMLAttributes,
memo, memo,
ReactNode, ReactNode,
useEffect,
useState,
} from 'react'; } from 'react';
import { Img } from 'react-image'; import { Img } from 'react-image';
@@ -45,25 +43,6 @@ interface ImageUnloaderProps {
export const FALLBACK_SVG = export const FALLBACK_SVG =
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PGZlQ29sb3JNYXRyaXggdHlwZT0ic2F0dXJhdGUiIHZhbHVlcz0iMCIvPjwvZmlsdGVyPjxwYXRoIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iLjA1IiBkPSJNMCAwaDMwMHYzMDBIMHoiLz48L3N2Zz4='; '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({ export function BaseImage({
className, className,
containerClassName, containerClassName,
@@ -75,44 +54,38 @@ export function BaseImage({
unloaderIcon = 'emptyImage', unloaderIcon = 'emptyImage',
...props ...props
}: ImageProps) { }: ImageProps) {
const { inViewport, ref } = useInViewport();
return ( return (
<ImageViewportWrapper> <ImageContainer
{(shouldRenderImage, viewportRef) => { className={containerClassName}
return ( enableAnimation={enableAnimation}
<ImageContainer ref={ref}
className={containerClassName} {...imageContainerProps}
enableAnimation={enableAnimation} >
ref={viewportRef} {inViewport && src ? (
{...imageContainerProps} <Img
> className={clsx(styles.image, className, {
{shouldRenderImage && src ? ( [styles.animated]: enableAnimation,
<Img })}
className={clsx(styles.image, className, { decoding="async"
[styles.animated]: enableAnimation, fetchPriority="high"
})} loader={includeLoader ? <ImageLoader className={className} /> : null}
decoding="async" loading="eager"
fetchPriority="high" src={src}
loader={ unloader={
includeLoader ? <ImageLoader className={className} /> : null includeUnloader ? (
}
loading="eager"
src={src}
unloader={
includeUnloader ? (
<ImageUnloader className={className} icon={unloaderIcon} />
) : null
}
{...props}
/>
) : !src ? (
<ImageUnloader className={className} icon={unloaderIcon} /> <ImageUnloader className={className} icon={unloaderIcon} />
) : ( ) : null
<ImageLoader className={className} /> }
)} {...props}
</ImageContainer> />
); ) : !src ? (
}} <ImageUnloader className={className} icon={unloaderIcon} />
</ImageViewportWrapper> ) : (
<ImageLoader className={className} />
)}
</ImageContainer>
); );
} }