stop media carousels in discover from loading right away

when heading to the homepage for the first time, it took a realllllly long time to load. This fixes that with intersection stuff

src/pages/discover/components/MediaCarousel.tsx

@@ -115,9 +115,11 @@ export function MediaCarousel({
     }));
 
   // Set up intersection observer for lazy loading
-  const { targetRef, isIntersecting } = useIntersectionObserver({
-    rootMargin: "300px",
-  });
+  const { targetRef, isIntersecting, hasIntersected } = useIntersectionObserver(
+    {
+      rootMargin: "300px",
+    },
+  );
 
   // Handle provider/genre selection
   const handleProviderChange = React.useCallback((id: string, name: string) => {
@@ -195,7 +197,7 @@ export function MediaCarousel({
     content.type,
   ]);
 
-  // Fetch media using our hook
+  // Fetch media using our hook - only when carousel has been visible
   const { media, sectionTitle } = useDiscoverMedia({
     contentType,
     mediaType,
@@ -205,6 +207,7 @@ export function MediaCarousel({
     providerName: selectedProviderName,
     mediaTitle: selectedRecommendationTitle,
     isCarouselView: true,
+    enabled: hasIntersected,
   });
 
   // Find active button

src/pages/discover/hooks/useDiscoverMedia.ts

@@ -112,6 +112,7 @@ export function useDiscoverMedia({
   providerName,
   mediaTitle,
   isCarouselView = false,
+  enabled = true,
 }: UseDiscoverMediaProps): UseDiscoverMediaReturn {
   const [media, setMedia] = useState<DiscoverMedia[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -512,8 +513,11 @@ export function useDiscoverMedia({
       setMedia([]);
       setCurrentContentType(contentType);
     }
-    fetchMedia();
-  }, [fetchMedia, contentType, currentContentType, page, id]);
+    // Only fetch when enabled
+    if (enabled) {
+      fetchMedia();
+    }
+  }, [fetchMedia, contentType, currentContentType, page, id, enabled]);
 
   return {
     media,

src/pages/discover/types/discover.ts

@@ -23,6 +23,7 @@ export interface UseDiscoverMediaProps {
   providerName?: string;
   mediaTitle?: string;
   isCarouselView?: boolean;
+  enabled?: boolean;
 }
 
 export interface DiscoverMedia {