feat(frontend): only load request/tmdb cards when in the browser view

src/components/RequestCard/index.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 import type { MediaRequest } from '../../../server/entity/MediaRequest';
 import type { TvDetails } from '../../../server/models/Tv';
 import type { MovieDetails } from '../../../server/models/Movie';
@@ -42,6 +43,9 @@ interface RequestCardProps {
 }
 
 const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
   const intl = useIntl();
   const { hasPermission } = useUser();
   const { locale } = useContext(LanguageContext);
@@ -50,7 +54,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
       ? `/api/v1/movie/${request.media.tmdbId}`
       : `/api/v1/tv/${request.media.tmdbId}`;
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
-    `${url}?language=${locale}`
+    inView ? `${url}?language=${locale}` : null
   );
   const { data: requestData, error: requestError, revalidate } = useSWR<
     MediaRequest
@@ -67,7 +71,11 @@ const RequestCard: React.FC<RequestCardProps> = ({ request }) => {
   };
 
   if (!title && !error) {
-    return <RequestCardPlaceholder />;
+    return (
+      <div ref={ref}>
+        <RequestCardPlaceholder />
+      </div>
+    );
   }
 
   if (!requestData && !requestError) {

src/components/RequestList/RequestItem/index.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useInView } from 'react-intersection-observer';
 import type { MediaRequest } from '../../../../server/entity/MediaRequest';
 import {
   useIntl,
@@ -36,6 +37,9 @@ interface RequestItemProps {
 }
 
 const RequestItem: React.FC<RequestItemProps> = ({ request, onDelete }) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
   const intl = useIntl();
   const { hasPermission } = useUser();
   const { locale } = useContext(LanguageContext);
@@ -44,7 +48,7 @@ const RequestItem: React.FC<RequestItemProps> = ({ request, onDelete }) => {
       ? `/api/v1/movie/${request.media.tmdbId}`
       : `/api/v1/tv/${request.media.tmdbId}`;
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
-    `${url}?language=${locale}`
+    inView ? `${url}?language=${locale}` : null
   );
   const { data: requestData, error: requestError, revalidate } = useSWR<
     MediaRequest
@@ -68,7 +72,7 @@ const RequestItem: React.FC<RequestItemProps> = ({ request, onDelete }) => {
 
   if (!title && !error) {
     return (
-      <tr className="w-full bg-gray-800 animate-pulse h-24">
+      <tr className="w-full bg-gray-800 animate-pulse h-24" ref={ref}>
         <td colSpan={6}></td>
       </tr>
     );

src/components/TitleCard/TmdbTitleCard.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useInView } from 'react-intersection-observer';
 import useSWR from 'swr';
 import type { MovieDetails } from '../../../server/models/Movie';
 import type { TvDetails } from '../../../server/models/Tv';
@@ -15,15 +16,22 @@ const isMovie = (movie: MovieDetails | TvDetails): movie is MovieDetails => {
 };
 
 const TmdbTitleCard: React.FC<TmdbTitleCardProps> = ({ tmdbId, type }) => {
+  const { ref, inView } = useInView({
+    triggerOnce: true,
+  });
   const { locale } = useContext(LanguageContext);
   const url =
     type === 'movie' ? `/api/v1/movie/${tmdbId}` : `/api/v1/tv/${tmdbId}`;
   const { data: title, error } = useSWR<MovieDetails | TvDetails>(
-    `${url}?language=${locale}`
+    inView ? `${url}?language=${locale}` : null
   );
 
   if (!title && !error) {
-    return <TitleCard.Placeholder />;
+    return (
+      <div ref={ref}>
+        <TitleCard.Placeholder />
+      </div>
+    );
   }
 
   if (!title) {