From ee145d6f65f5767210763d552d53f548d6e0cea8 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 24 Jan 2026 17:27:32 -0800
Subject: [PATCH] add enableViewport prop to Image to conditionally lazy load

---
 src/shared/components/image/image.tsx | 61 +++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/src/shared/components/image/image.tsx b/src/shared/components/image/image.tsx
index 6cb49aeb8..23591b274 100644
--- a/src/shared/components/image/image.tsx
+++ b/src/shared/components/image/image.tsx
@@ -18,6 +18,7 @@ import { useInViewport } from '/@/shared/hooks/use-in-viewport';
 export interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
     containerClassName?: string;
     enableAnimation?: boolean;
+    enableViewport?: boolean;
     imageContainerProps?: Omit<ImageContainerProps, 'children'>;
     includeLoader?: boolean;
     includeUnloader?: boolean;
@@ -47,12 +48,72 @@ export function BaseImage({
     className,
     containerClassName,
     enableAnimation = false,
+    enableViewport = true,
     imageContainerProps,
     includeLoader = true,
     includeUnloader = true,
     src,
     unloaderIcon = 'emptyImage',
     ...props
+}: ImageProps) {
+    if (enableViewport) {
+        return (
+            <ImageWithViewport
+                className={className}
+                containerClassName={containerClassName}
+                enableAnimation={enableAnimation}
+                imageContainerProps={imageContainerProps}
+                includeLoader={includeLoader}
+                includeUnloader={includeUnloader}
+                src={src}
+                unloaderIcon={unloaderIcon}
+                {...props}
+            />
+        );
+    }
+
+    return (
+        <ImageContainer
+            className={containerClassName}
+            enableAnimation={enableAnimation}
+            {...imageContainerProps}
+        >
+            {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 ? (
+                <ImageUnloader className={className} icon={unloaderIcon} />
+            ) : (
+                <ImageLoader className={className} />
+            )}
+        </ImageContainer>
+    );
+}
+
+function ImageWithViewport({
+    className,
+    containerClassName,
+    enableAnimation,
+    imageContainerProps,
+    includeLoader,
+    includeUnloader,
+    src,
+    unloaderIcon,
+    ...props
 }: ImageProps) {
     const { inViewport, ref } = useInViewport();