From a9e646dd8192cde904d38512b67877cf047f0e22 Mon Sep 17 00:00:00 2001
From: monoid <qaswedfr55@gmail.com>
Date: Sun, 7 Apr 2024 17:58:05 +0900
Subject: [PATCH] threshold 0

---
 .../src/components/gallery/LazyImage.tsx      | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/gallery/LazyImage.tsx b/packages/client/src/components/gallery/LazyImage.tsx
index 6520da7..fd6ea7c 100644
--- a/packages/client/src/components/gallery/LazyImage.tsx
+++ b/packages/client/src/components/gallery/LazyImage.tsx
@@ -6,20 +6,21 @@ export function LazyImage({ src, alt, className }: { src: string; alt: string; c
 
     useEffect(() => {
         if (ref.current) {
-            let toggle = false;
             const observer = new IntersectionObserver((entries) => {
                 if (entries.some(x => x.isIntersecting)) {
                     setLoaded(true);
-                    toggle = !toggle;
-                    ref.current?.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 500, easing: "ease-in-out" });
+                    ref.current?.animate([
+                        { opacity: 0 },
+                        { opacity: 1 }
+                    ], {
+                        duration: 300,
+                        easing: "ease-in-out"
+                    });
                     observer.disconnect();
                 }
-                else {
-                    if (toggle) {
-                        console.log("fade out");
-                        ref.current?.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 500, easing: "ease-in-out" });
-                    }
-                }
+            }, {
+                rootMargin: "200px",
+                threshold: 0
             });
             observer.observe(ref.current);
             return () => {