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

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) {