fix(frontend): when there were no results in the list view, it would call fetch more infinitely

src/components/Common/ListView/index.tsx

@@ -12,6 +12,7 @@ interface ListViewProps {
   items?: (TvResult | MovieResult | PersonResult)[];
   isEmpty?: boolean;
   isLoading?: boolean;
+  isReachingEnd?: boolean;
   onScrollBottom: () => void;
 }
 
@@ -20,8 +21,9 @@ const ListView: React.FC<ListViewProps> = ({
   isEmpty,
   isLoading,
   onScrollBottom,
+  isReachingEnd,
 }) => {
-  useVerticalScroll(onScrollBottom, !isLoading);
+  useVerticalScroll(onScrollBottom, !isLoading && !isEmpty && !isReachingEnd);
   return (
     <>
       {isEmpty && (
@@ -79,6 +81,7 @@ const ListView: React.FC<ListViewProps> = ({
           );
         })}
         {isLoading &&
+          !isReachingEnd &&
           [...Array(10)].map((_item, i) => (
             <li
               key={`placeholder-${i}`}

src/components/Discover/DiscoverMovies.tsx

@@ -49,6 +49,10 @@ const DiscoverMovies: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -60,10 +64,11 @@ const DiscoverMovies: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
+        isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
       />
     </>

src/components/Discover/DiscoverTv.tsx

@@ -46,6 +46,10 @@ const DiscoverTv: React.FC = () => {
 
   const titles = data?.reduce((a, v) => [...a, ...v.results], [] as TvResult[]);
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -57,7 +61,8 @@ const DiscoverTv: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }

src/components/MovieDetails/MovieRecommendations.tsx

@@ -46,6 +46,10 @@ const MovieRecommendations: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -57,7 +61,8 @@ const MovieRecommendations: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }

src/components/MovieDetails/MovieSimilar.tsx

@@ -46,6 +46,10 @@ const MovieSimilar: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -57,10 +61,11 @@ const MovieSimilar: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
+        isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
       />
     </>

src/components/Search/index.tsx

@@ -52,6 +52,10 @@ const Search: React.FC = () => {
     [] as (MovieResult | TvResult | PersonResult)[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -79,10 +83,11 @@ const Search: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }
+        isReachingEnd={isReachingEnd}
         onScrollBottom={fetchMore}
       />
     </>

src/components/TvDetails/TvRecommendations.tsx

@@ -45,6 +45,10 @@ const TvRecommendations: React.FC = () => {
 
   const titles = data?.reduce((a, v) => [...a, ...v.results], [] as TvResult[]);
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -56,7 +60,8 @@ const TvRecommendations: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }

src/components/TvDetails/TvSimilar.tsx

@@ -48,6 +48,10 @@ const TvSimilar: React.FC = () => {
     [] as MovieResult[]
   );
 
+  const isEmpty = !isLoadingInitialData && titles?.length === 0;
+  const isReachingEnd =
+    isEmpty || (data && data[data.length - 1]?.results.length < 20);
+
   return (
     <>
       <div className="md:flex md:items-center md:justify-between mb-8 mt-6">
@@ -59,7 +63,8 @@ const TvSimilar: React.FC = () => {
       </div>
       <ListView
         items={titles}
-        isEmpty={!isLoadingInitialData && titles?.length === 0}
+        isEmpty={isEmpty}
+        isReachingEnd={isReachingEnd}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)
         }