Revert "refactor image to only render in viewport once"

This reverts commit 746951b55f.

src/shared/components/image/image.tsx

@@ -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,26 +54,23 @@ export function BaseImage({
     unloaderIcon = 'emptyImage',
     ...props
 }: ImageProps) {
-    return (
+    const { inViewport, ref } = useInViewport();
-        <ImageViewportWrapper>
+
-            {(shouldRenderImage, viewportRef) => {
     return (
         <ImageContainer
             className={containerClassName}
             enableAnimation={enableAnimation}
-                        ref={viewportRef}
+            ref={ref}
             {...imageContainerProps}
         >
-                        {shouldRenderImage && src ? (
+            {inViewport && src ? (
                 <Img
                     className={clsx(styles.image, className, {
                         [styles.animated]: enableAnimation,
                     })}
                     decoding="async"
                     fetchPriority="high"
-                                loader={
+                    loader={includeLoader ? <ImageLoader className={className} /> : null}
-                                    includeLoader ? <ImageLoader className={className} /> : null
-                                }
                     loading="eager"
                     src={src}
                     unloader={
@@ -111,9 +87,6 @@ export function BaseImage({
             )}
         </ImageContainer>
     );
-            }}
-        </ImageViewportWrapper>
-    );
 }
 
 export const Image = memo(BaseImage);