unload off screen carousels

src/pages/discover/components/LazyMediaCarousel.tsx

@@ -26,9 +26,8 @@ export function LazyMediaCarousel({
   const [medias, setMedias] = useState<Media[]>([]);
 
   // Use intersection observer to detect when this component is visible
-  const { targetRef, isIntersecting, hasIntersected } = useIntersectionObserver(
+  const { targetRef, isIntersecting } = useIntersectionObserver(
     { rootMargin: "200px" }, // Load when within 200px of viewport
-    true, // Only trigger once
   );
 
   // Use the lazy loading hook to fetch data when visible
@@ -36,7 +35,7 @@ export function LazyMediaCarousel({
     genre || null,
     category || null,
     mediaType,
-    hasIntersected,
+    isIntersecting,
   );
 
   // Update medias when data is loaded

src/pages/discover/hooks/useIntersectionObserver.tsx

@@ -8,20 +8,24 @@ interface IntersectionObserverOptions {
 
 export function useIntersectionObserver(
   options: IntersectionObserverOptions = {},
-  onceOnly = false,
 ) {
   const [isIntersecting, setIsIntersecting] = useState(false);
   const [hasIntersected, setHasIntersected] = useState(false);
   const targetRef = useRef<Element | null>(null);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(([entry]) => {
-      setIsIntersecting(entry.isIntersecting);
-
-      if (entry.isIntersecting && !hasIntersected) {
-        setHasIntersected(true);
-      }
-    }, options);
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsIntersecting(entry.isIntersecting);
+        if (entry.isIntersecting) {
+          setHasIntersected(true);
+        }
+      },
+      {
+        ...options,
+        rootMargin: options.rootMargin || "200px 0px",
+      },
+    );
 
     const currentTarget = targetRef.current;
     if (currentTarget) {
@@ -33,11 +37,7 @@ export function useIntersectionObserver(
         observer.unobserve(currentTarget);
       }
     };
-  }, [options, hasIntersected]);
+  }, [options]);
 
-  // If onceOnly is true, we only care if it has ever intersected
-  // Otherwise, we care about the current intersection state
-  const shouldLoad = onceOnly ? hasIntersected : isIntersecting;
-
-  return { targetRef, isIntersecting: shouldLoad, hasIntersected };
+  return { targetRef, isIntersecting, hasIntersected };
 }