From 8cbe8f986a3f8c729b3aa62a85d88e110f9350a4 Mon Sep 17 00:00:00 2001 From: Pas <74743263+Pasithea0@users.noreply.github.com> Date: Wed, 25 Jun 2025 08:53:43 -0600 Subject: [PATCH] optimize trakt loading for carousel view --- src/pages/discover/MoreContent.tsx | 23 ++++++----- .../discover/components/MediaCarousel.tsx | 25 +++++++----- src/pages/discover/hooks/useDiscoverMedia.ts | 38 +++++++++++++++---- 3 files changed, 58 insertions(+), 28 deletions(-) diff --git a/src/pages/discover/MoreContent.tsx b/src/pages/discover/MoreContent.tsx index 21c95a2d..be277694 100644 --- a/src/pages/discover/MoreContent.tsx +++ b/src/pages/discover/MoreContent.tsx @@ -84,6 +84,7 @@ export function MoreContent({ onShowDetails }: MoreContentProps) { mediaTitle: recommendationSources.find( (s) => s.id === selectedRecommendationId, )?.title, + isCarouselView: false, }); // Handle content visibility @@ -184,17 +185,19 @@ export function MoreContent({ onShowDetails }: MoreContentProps) {
- {Array.from({ length: 20 }).map((_, _i) => ( -
-
-
-
+ {Array(20) + .fill(null) + .map(() => ( +
+
+
+
+
-
- ))} + ))}
diff --git a/src/pages/discover/components/MediaCarousel.tsx b/src/pages/discover/components/MediaCarousel.tsx index 31abedaa..b0f6d930 100644 --- a/src/pages/discover/components/MediaCarousel.tsx +++ b/src/pages/discover/components/MediaCarousel.tsx @@ -213,6 +213,7 @@ export function MediaCarousel({ genreName: selectedGenreName, providerName: selectedProviderName, mediaTitle: selectedRecommendationTitle, + isCarouselView: true, }); // Find active button @@ -313,11 +314,13 @@ export function MediaCarousel({
- {Array.from({ length: 10 }).map(() => ( - - ))} + {Array(10) + .fill(null) + .map(() => ( + + ))}
@@ -533,11 +536,13 @@ export function MediaCarousel({ />
)) - : Array.from({ length: 10 }).map(() => ( - - ))} + : Array(10) + .fill(null) + .map((_, i) => ( + + ))} {moreContent && generatedMoreLink && ( diff --git a/src/pages/discover/hooks/useDiscoverMedia.ts b/src/pages/discover/hooks/useDiscoverMedia.ts index f18eadfd..ed8a1b68 100644 --- a/src/pages/discover/hooks/useDiscoverMedia.ts +++ b/src/pages/discover/hooks/useDiscoverMedia.ts @@ -129,6 +129,8 @@ export interface UseDiscoverMediaProps { providerName?: string; /** Media title for recommendations display */ mediaTitle?: string; + /** Whether this is for a carousel view (limits results) */ + isCarouselView?: boolean; } /** @@ -284,6 +286,7 @@ export function useDiscoverMedia({ genreName, providerName, mediaTitle, + isCarouselView = false, }: UseDiscoverMediaProps): UseDiscoverMediaReturn { const [media, setMedia] = useState([]); const [isLoading, setIsLoading] = useState(false); @@ -308,15 +311,26 @@ export function useDiscoverMedia({ const fetchTMDBMedia = useCallback( async (endpoint: string, params: Record = {}) => { try { + // For carousel views, we only need one page of results + if (isCarouselView) { + params.page = "1"; // Always use first page for carousels + } else { + params.page = page.toString(); // Use the requested page for "view more" pages + } + const data = await get(endpoint, { api_key: conf().TMDB_READ_API_KEY, language: formattedLanguage, - page: page.toString(), ...params, }); + // For carousel views, we might want to limit the number of results + const results = isCarouselView + ? data.results.slice(0, 20) + : data.results; + return { - results: data.results.map((item: any) => ({ + results: results.map((item: any) => ({ ...item, type: mediaType === "movie" ? "movie" : "show", })), @@ -327,7 +341,7 @@ export function useDiscoverMedia({ throw err; } }, - [formattedLanguage, page, mediaType], + [formattedLanguage, page, mediaType, isCarouselView], ); const fetchTraktMedia = useCallback( @@ -342,13 +356,18 @@ export function useDiscoverMedia({ const response = await Promise.race([traktFunction(), timeoutPromise]); // Paginate the results + const pageSize = isCarouselView ? 20 : 100; // Limit to 20 items for carousels, get more for detailed views const { tmdb_ids: tmdbIds, hasMore: hasMoreResults } = paginateResults( response, page, + pageSize, ); + // For carousel views, we only need to fetch details for displayed items + const idsToFetch = isCarouselView ? tmdbIds.slice(0, 20) : tmdbIds; + // Fetch details for each TMDB ID - const mediaPromises = tmdbIds.map(async (tmdbId: number) => { + const mediaPromises = idsToFetch.map(async (tmdbId: number) => { const endpoint = `/${mediaType}/${tmdbId}`; try { const data = await get(endpoint, { @@ -385,7 +404,7 @@ export function useDiscoverMedia({ throw err; } }, - [mediaType, formattedLanguage, page], + [mediaType, formattedLanguage, page, isCarouselView], ); // Get Trakt function for provider @@ -442,8 +461,11 @@ export function useDiscoverMedia({ const picks = mediaType === "movie" ? EDITOR_PICKS_MOVIES : EDITOR_PICKS_TV_SHOWS; + // For carousel views, limit the number of picks to fetch + const picksToFetch = isCarouselView ? picks.slice(0, 20) : picks; + try { - const mediaPromises = picks.map(async (item) => { + const mediaPromises = picksToFetch.map(async (item) => { const endpoint = `/${mediaType}/${item.id}`; const data = await get(endpoint, { api_key: conf().TMDB_READ_API_KEY, @@ -459,13 +481,13 @@ export function useDiscoverMedia({ const results = await Promise.all(mediaPromises); return { results, - hasMore: false, + hasMore: picks.length > picksToFetch.length, }; } catch (err) { console.error("Error fetching editor picks:", err); throw err; } - }, [mediaType, formattedLanguage]); + }, [mediaType, formattedLanguage, isCarouselView]); const fetchMedia = useCallback(async () => { setIsLoading(true);