From 63681378153d896893ee2e654ef924ba98fc625c Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 6 Sep 2025 17:14:30 -0700
Subject: [PATCH] move inView ref to ImageContainer component

- the separate outer component is unneeded and affects the positioning of some components which rely on the ImageContainer's styling
---
 src/shared/components/image/image.module.css |   5 +
 src/shared/components/image/image.tsx        | 101 ++++++++++---------
 2 files changed, 58 insertions(+), 48 deletions(-)

diff --git a/src/shared/components/image/image.module.css b/src/shared/components/image/image.module.css
index 5ffb0b0f..2fbb2eef 100644
--- a/src/shared/components/image/image.module.css
+++ b/src/shared/components/image/image.module.css
@@ -32,3 +32,8 @@
     width: 100%;
     height: 100%;
 }
+
+.view-wrapper {
+    width: 100%;
+    height: 100%;
+}
diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index 61865177..d4f2e910 100644
--- a/src/shared/components/image/image.tsx
+++ b/src/shared/components/image/image.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import { motion, MotionConfigProps } from 'motion/react';
-import { type ImgHTMLAttributes } from 'react';
+import { ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react';
 import { Img } from 'react-image';
 import { InView } from 'react-intersection-observer';
 
@@ -50,35 +50,34 @@ export function Image({
         return (
             <InView>
                 {({ inView, ref }) => (
-                    <div ref={ref}>
-                        <Img
-                            className={clsx(styles.image, className)}
-                            container={(children) => (
-                                <ImageContainer
-                                    className={containerClassName}
-                                    enableAnimation={enableAnimation}
-                                    {...imageContainerProps}
-                                >
-                                    {children}
+                    <Img
+                        className={clsx(styles.image, className)}
+                        container={(children) => (
+                            <ImageContainer
+                                className={containerClassName}
+                                enableAnimation={enableAnimation}
+                                ref={ref}
+                                {...imageContainerProps}
+                            >
+                                {children}
+                            </ImageContainer>
+                        )}
+                        loader={
+                            includeLoader ? (
+                                <ImageContainer className={containerClassName}>
+                                    <ImageLoader className={className} />
                                 </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>
+                            ) : null
+                        }
+                        src={inView ? src : FALLBACK_SVG}
+                        unloader={
+                            includeUnloader ? (
+                                <ImageContainer className={containerClassName}>
+                                    <ImageUnloader className={className} />
+                                </ImageContainer>
+                            ) : null
+                        }
+                    />
                 )}
             </InView>
         );
@@ -87,25 +86,31 @@ export function Image({
     return <ImageUnloader />;
 }
 
-function ImageContainer({ children, className, enableAnimation, ...props }: ImageContainerProps) {
-    if (!enableAnimation) {
-        return (
-            <div className={clsx(styles.imageContainer, className)} {...props}>
-                {children}
-            </div>
-        );
-    }
+const ImageContainer = forwardRef(
+    (
+        { children, className, enableAnimation, ...props }: ImageContainerProps,
+        ref: ForwardedRef<HTMLDivElement>,
+    ) => {
+        if (!enableAnimation) {
+            return (
+                <div className={clsx(styles.imageContainer, className)} ref={ref} {...props}>
+                    {children}
+                </div>
+            );
+        }
 
-    return (
-        <motion.div
-            className={clsx(styles.imageContainer, className)}
-            {...animationProps.fadeIn}
-            {...props}
-        >
-            {children}
-        </motion.div>
-    );
-}
+        return (
+            <motion.div
+                className={clsx(styles.imageContainer, className)}
+                ref={ref}
+                {...animationProps.fadeIn}
+                {...props}
+            >
+                {children}
+            </motion.div>
+        );
+    },
+);
 
 function ImageLoader({ className }: ImageLoaderProps) {
     return (
@@ -118,7 +123,7 @@ function ImageLoader({ className }: ImageLoaderProps) {
 function ImageUnloader({ className }: ImageUnloaderProps) {
     return (
         <div className={clsx(styles.unloader, className)}>
-            <Icon icon="emptyImage" size="xl" />
+            <Icon color="default" icon="emptyImage" size="xl" />
         </div>
     );
 }