From be6aec2c86301e39bd2096c4ee512886c4534026 Mon Sep 17 00:00:00 2001
From: Pas <74743263+Pasithea0@users.noreply.github.com>
Date: Mon, 1 Dec 2025 16:15:45 -0700
Subject: [PATCH] Refactor MediaCard for internal lazy loading and fix
 intersection logic

Moved intersection observer logic for lazy loading images from MediaCarousel into MediaCard, allowing each card to handle its own image loading. Simplified MediaCarousel by removing its intersection observer and related loading state, improving component separation and maintainability.
---
 src/components/media/MediaCard.tsx            | 300 +++++++++---------
 .../discover/components/MediaCarousel.tsx     |  52 +--
 2 files changed, 152 insertions(+), 200 deletions(-)

diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx
index cd9828b8..763a24c6 100644
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@@ -17,23 +17,19 @@ import { MediaBookmarkButton } from "./MediaBookmark";
 import { IconPatch } from "../buttons/IconPatch";
 import { Icon, Icons } from "../Icon";
 
-// Intersection Observer Hook
+// Simple Intersection Observer Hook
 function useIntersectionObserver(options: IntersectionObserverInit = {}) {
   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) {
-          setHasIntersected(true);
-        }
       },
       {
         ...options,
-        rootMargin: options.rootMargin || "300px 0px",
+        rootMargin: options.rootMargin || "300px",
       },
     );
 
@@ -49,7 +45,7 @@ function useIntersectionObserver(options: IntersectionObserverInit = {}) {
     };
   }, [options]);
 
-  return { targetRef, isIntersecting, hasIntersected };
+  return { targetRef, isIntersecting };
 }
 
 // Skeleton Component
@@ -135,8 +131,8 @@ function MediaCardContent({
 
   const [searchQuery] = useSearchQuery();
 
-  // Intersection observer for lazy loading
-  const { targetRef } = useIntersectionObserver({
+  // Simple intersection observer for lazy loading images
+  const { targetRef, isIntersecting } = useIntersectionObserver({
     rootMargin: "300px",
   });
 
@@ -160,158 +156,162 @@ function MediaCardContent({
   }
 
   return (
-    <Flare.Base
-      className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
-        canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
-      } ${closable ? "jiggle" : ""}`}
-      tabIndex={canLink ? 0 : -1}
-      onKeyUp={(e) => e.key === "Enter" && e.currentTarget.click()}
-    >
-      <Flare.Light
-        flareSize={300}
-        cssColorVar="--colors-mediaCard-hoverAccent"
-        backgroundClass="bg-mediaCard-hoverBackground duration-100"
-        className={classNames({
-          "rounded-xl bg-background-main group-hover:opacity-100": canLink,
-        })}
-      />
-      <Flare.Child
-        className={`pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300 ${
-          canLink ? "group-hover:scale-95" : "opacity-60"
-        }`}
+    <div ref={targetRef as React.RefObject<HTMLDivElement>}>
+      <Flare.Base
+        className={`group -m-[0.705em] rounded-xl bg-background-main transition-colors duration-300 focus:relative focus:z-10 ${
+          canLink ? "hover:bg-mediaCard-hoverBackground tabbable" : ""
+        } ${closable ? "jiggle" : ""}`}
+        tabIndex={canLink ? 0 : -1}
+        onKeyUp={(e) => e.key === "Enter" && e.currentTarget.click()}
       >
-        <div
-          className={classNames(
-            "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
-            {
-              "group-hover:rounded-lg": canLink,
-            },
-          )}
-          style={{
-            backgroundImage: media.poster
-              ? `url(${media.poster})`
-              : "url(/placeholder.png)",
-          }}
+        <Flare.Light
+          flareSize={300}
+          cssColorVar="--colors-mediaCard-hoverAccent"
+          backgroundClass="bg-mediaCard-hoverBackground duration-100"
+          className={classNames({
+            "rounded-xl bg-background-main group-hover:opacity-100": canLink,
+          })}
+        />
+        <Flare.Child
+          className={`pointer-events-auto relative mb-2 p-[0.4em] transition-transform duration-300 ${
+            canLink ? "group-hover:scale-95" : "opacity-60"
+          }`}
         >
-          {series ? (
-            <div
-              className={[
-                "absolute right-2 top-2 rounded-md bg-mediaCard-badge px-2 py-1 transition-colors",
-              ].join(" ")}
-            >
-              <p
+          <div
+            className={classNames(
+              "relative mb-4 pb-[150%] w-full overflow-hidden rounded-xl bg-mediaCard-hoverBackground bg-cover bg-center transition-[border-radius] duration-300",
+              {
+                "group-hover:rounded-lg": canLink,
+              },
+            )}
+            style={{
+              backgroundImage: isIntersecting
+                ? media.poster
+                  ? `url(${media.poster})`
+                  : "url(/placeholder.png)"
+                : "",
+            }}
+          >
+            {series ? (
+              <div
                 className={[
-                  "text-center text-xs font-bold text-mediaCard-badgeText transition-colors",
-                  closable ? "" : "group-hover:text-white",
+                  "absolute right-2 top-2 rounded-md bg-mediaCard-badge px-2 py-1 transition-colors",
                 ].join(" ")}
               >
-                {t("media.episodeDisplay", {
-                  season: series.season || 1,
-                  episode: series.episode,
-                })}
-              </p>
-            </div>
-          ) : null}
-
-          {percentage !== undefined ? (
-            <>
-              <div
-                className={`absolute inset-x-0 -bottom-px pb-1 h-12 bg-gradient-to-t from-mediaCard-shadow to-transparent transition-colors ${
-                  canLink ? "group-hover:from-mediaCard-hoverShadow" : ""
-                }`}
-              />
-              <div
-                className={`absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-mediaCard-shadow to-transparent transition-colors ${
-                  canLink ? "group-hover:from-mediaCard-hoverShadow" : ""
-                }`}
-              />
-              <div className="absolute inset-x-0 bottom-0 p-3">
-                <div className="relative h-1 overflow-hidden rounded-full bg-mediaCard-barColor">
-                  <div
-                    className="absolute inset-y-0 left-0 rounded-full bg-mediaCard-barFillColor"
-                    style={{
-                      width: percentageString,
-                    }}
-                  />
-                </div>
+                <p
+                  className={[
+                    "text-center text-xs font-bold text-mediaCard-badgeText transition-colors",
+                    closable ? "" : "group-hover:text-white",
+                  ].join(" ")}
+                >
+                  {t("media.episodeDisplay", {
+                    season: series.season || 1,
+                    episode: series.episode,
+                  })}
+                </p>
               </div>
-            </>
-          ) : null}
+            ) : null}
+
+            {percentage !== undefined ? (
+              <>
+                <div
+                  className={`absolute inset-x-0 -bottom-px pb-1 h-12 bg-gradient-to-t from-mediaCard-shadow to-transparent transition-colors ${
+                    canLink ? "group-hover:from-mediaCard-hoverShadow" : ""
+                  }`}
+                />
+                <div
+                  className={`absolute inset-x-0 bottom-0 h-12 bg-gradient-to-t from-mediaCard-shadow to-transparent transition-colors ${
+                    canLink ? "group-hover:from-mediaCard-hoverShadow" : ""
+                  }`}
+                />
+                <div className="absolute inset-x-0 bottom-0 p-3">
+                  <div className="relative h-1 overflow-hidden rounded-full bg-mediaCard-barColor">
+                    <div
+                      className="absolute inset-y-0 left-0 rounded-full bg-mediaCard-barFillColor"
+                      style={{
+                        width: percentageString,
+                      }}
+                    />
+                  </div>
+                </div>
+              </>
+            ) : null}
+
+            {!closable && (
+              <div
+                className="absolute bookmark-button"
+                onClick={(e) => e.preventDefault()}
+              >
+                <MediaBookmarkButton media={media} />
+              </div>
+            )}
+
+            {searchQuery.length > 0 && !closable ? (
+              <div className="absolute" onClick={(e) => e.preventDefault()}>
+                <MediaBookmarkButton media={media} />
+              </div>
+            ) : null}
+
+            <div
+              className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
+                closable ? "opacity-100" : "pointer-events-none opacity-0"
+              }`}
+            >
+              <IconPatch
+                clickable
+                className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
+                onClick={() => closable && onClose?.()}
+                icon={Icons.X}
+              />
+            </div>
+          </div>
+
+          <h1 className="mb-1 line-clamp-3 max-h-[4.5rem] text-ellipsis break-words font-bold text-white">
+            <span>{media.title}</span>
+          </h1>
+          <div className="media-info-container justify-content-center flex flex-wrap">
+            <DotList className="text-xs" content={dotListContent} />
+          </div>
 
           {!closable && (
-            <div
-              className="absolute bookmark-button"
-              onClick={(e) => e.preventDefault()}
-            >
-              <MediaBookmarkButton media={media} />
+            <div className="absolute bottom-0 translate-y-1 right-1">
+              <button
+                className="media-more-button p-2"
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onShowDetails?.(media);
+                }}
+              >
+                <Icon
+                  className="text-xs font-semibold text-type-secondary"
+                  icon={Icons.ELLIPSIS}
+                />
+              </button>
             </div>
           )}
-
-          {searchQuery.length > 0 && !closable ? (
-            <div className="absolute" onClick={(e) => e.preventDefault()}>
-              <MediaBookmarkButton media={media} />
+          {editable && closable && (
+            <div className="absolute bottom-0 translate-y-1 right-1">
+              <button
+                className="media-more-button p-2"
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onEdit?.();
+                }}
+              >
+                <Icon
+                  className="text-xs font-semibold text-type-secondary"
+                  icon={Icons.EDIT}
+                />
+              </button>
             </div>
-          ) : null}
-
-          <div
-            className={`absolute inset-0 flex items-center justify-center bg-mediaCard-badge bg-opacity-80 transition-opacity duration-500 ${
-              closable ? "opacity-100" : "pointer-events-none opacity-0"
-            }`}
-          >
-            <IconPatch
-              clickable
-              className="text-2xl text-mediaCard-badgeText transition-transform hover:scale-110 duration-500"
-              onClick={() => closable && onClose?.()}
-              icon={Icons.X}
-            />
-          </div>
-        </div>
-
-        <h1 className="mb-1 line-clamp-3 max-h-[4.5rem] text-ellipsis break-words font-bold text-white">
-          <span>{media.title}</span>
-        </h1>
-        <div className="media-info-container justify-content-center flex flex-wrap">
-          <DotList className="text-xs" content={dotListContent} />
-        </div>
-
-        {!closable && (
-          <div className="absolute bottom-0 translate-y-1 right-1">
-            <button
-              className="media-more-button p-2"
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onShowDetails?.(media);
-              }}
-            >
-              <Icon
-                className="text-xs font-semibold text-type-secondary"
-                icon={Icons.ELLIPSIS}
-              />
-            </button>
-          </div>
-        )}
-        {editable && closable && (
-          <div className="absolute bottom-0 translate-y-1 right-1">
-            <button
-              className="media-more-button p-2"
-              type="button"
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onEdit?.();
-              }}
-            >
-              <Icon
-                className="text-xs font-semibold text-type-secondary"
-                icon={Icons.EDIT}
-              />
-            </button>
-          </div>
-        )}
-      </Flare.Child>
-    </Flare.Base>
+          )}
+        </Flare.Child>
+      </Flare.Base>
+    </div>
   );
 }
 
diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx
index 177b1f42..281b8b62 100644
--- a/src/pages/discover/components/MediaCarousel.tsx
+++ b/src/pages/discover/components/MediaCarousel.tsx
@@ -15,7 +15,6 @@ import {
   useDiscoverMedia,
   useDiscoverOptions,
 } from "@/pages/discover/hooks/useDiscoverMedia";
-import { useIntersectionObserver } from "@/pages/discover/hooks/useIntersectionObserver";
 import { useDiscoverStore } from "@/stores/discover";
 import { useProgressStore } from "@/stores/progress";
 import { MediaItem } from "@/utils/mediaTypes";
@@ -114,13 +113,6 @@ export function MediaCarousel({
       title: item.title || "",
     }));
 
-  // Set up intersection observer for lazy loading
-  const { targetRef, isIntersecting, hasIntersected } = useIntersectionObserver(
-    {
-      rootMargin: "300px",
-    },
-  );
-
   // Handle provider/genre selection
   const handleProviderChange = React.useCallback((id: string, name: string) => {
     setSelectedProviderId(id);
@@ -197,7 +189,7 @@ export function MediaCarousel({
     content.type,
   ]);
 
-  // Fetch media using our hook - only when carousel has been visible
+  // Fetch media using our hook
   const { media, sectionTitle, actualContentType } = useDiscoverMedia({
     contentType,
     mediaType,
@@ -207,7 +199,6 @@ export function MediaCarousel({
     providerName: selectedProviderName,
     mediaTitle: selectedRecommendationTitle,
     isCarouselView: true,
-    enabled: hasIntersected,
   });
 
   // Find active button
@@ -311,47 +302,8 @@ export function MediaCarousel({
     actualContentType,
   ]);
 
-  // Loading state
-  if (!isIntersecting || !sectionTitle) {
-    return (
-      <div ref={targetRef as React.RefObject<HTMLDivElement>}>
-        <div className="flex items-center justify-between ml-2 md:ml-8 mt-2">
-          <div className="flex gap-4 items-center">
-            <h2 className="text-2xl cursor-default font-bold text-white md:text-2xl pl-5 text-balance">
-              {t("discover.carousel.title.loading")}
-            </h2>
-          </div>
-        </div>
-        <div className="relative overflow-hidden carousel-container md:pb-4">
-          <div className="grid grid-flow-col auto-cols-max gap-4 pt-0 overflow-x-scroll scrollbar-none rounded-xl overflow-y-hidden md:pl-8 md:pr-8">
-            <div className="md:w-12" />
-            {Array(10)
-              .fill(null)
-              .map((_, index) => (
-                <div
-                  key={`skeleton-loading-${Math.random().toString(36).substring(2)}`}
-                  className="relative mt-4 group cursor-default user-select-none rounded-xl p-2 bg-transparent transition-colors duration-300 w-[10rem] md:w-[11.5rem] h-auto"
-                >
-                  <MediaCard
-                    media={{
-                      id: `skeleton-${index}`,
-                      title: "",
-                      poster: "",
-                      type: isTVShow ? "show" : "movie",
-                    }}
-                    forceSkeleton
-                  />
-                </div>
-              ))}
-            <div className="md:w-12" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div ref={targetRef as React.RefObject<HTMLDivElement>}>
+    <div>
       <div className="flex items-center justify-between ml-2 md:ml-8 mt-2">
         <div className="flex flex-col">
           <div className="flex items-center gap-4">