pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
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
+14
-6
+7
-4
src/pages/discover/components/MediaCarousel.tsx
+7
-4
src/pages/discover/components/MediaCarousel.tsx
···
115
115
}));
116
116
117
117
// Set up intersection observer for lazy loading
118
-
const { targetRef, isIntersecting } = useIntersectionObserver({
119
-
rootMargin: "300px",
120
-
});
118
+
const { targetRef, isIntersecting, hasIntersected } = useIntersectionObserver(
119
+
{
120
+
rootMargin: "300px",
121
+
},
122
+
);
121
123
122
124
// Handle provider/genre selection
123
125
const handleProviderChange = React.useCallback((id: string, name: string) => {
···
195
197
content.type,
196
198
]);
197
199
198
-
// Fetch media using our hook
200
+
// Fetch media using our hook - only when carousel has been visible
199
201
const { media, sectionTitle } = useDiscoverMedia({
200
202
contentType,
201
203
mediaType,
···
205
207
providerName: selectedProviderName,
206
208
mediaTitle: selectedRecommendationTitle,
207
209
isCarouselView: true,
210
+
enabled: hasIntersected,
208
211
});
209
212
210
213
// Find active button
+6
-2
src/pages/discover/hooks/useDiscoverMedia.ts
+6
-2
src/pages/discover/hooks/useDiscoverMedia.ts
···
112
112
providerName,
113
113
mediaTitle,
114
114
isCarouselView = false,
115
+
enabled = true,
115
116
}: UseDiscoverMediaProps): UseDiscoverMediaReturn {
116
117
const [media, setMedia] = useState<DiscoverMedia[]>([]);
117
118
const [isLoading, setIsLoading] = useState(false);
···
512
513
setMedia([]);
513
514
setCurrentContentType(contentType);
514
515
}
515
-
fetchMedia();
516
-
}, [fetchMedia, contentType, currentContentType, page, id]);
516
+
// Only fetch when enabled
517
+
if (enabled) {
518
+
fetchMedia();
519
+
}
520
+
}, [fetchMedia, contentType, currentContentType, page, id, enabled]);
517
521
518
522
return {
519
523
media,