Optimized load times by using native lazy loading and reducing the content fetched

package.json

@@ -60,7 +60,6 @@
     "react-google-recaptcha-v3": "^1.10.1",
     "react-helmet-async": "^2.0.4",
     "react-i18next": "^14.1.0",
-    "react-lazy-load-image-component": "^1.6.0",
     "react-lazy-with-preload": "^2.2.1",
     "react-router-dom": "^6.22.3",
     "react-slick": "^0.30.2",

pnpm-lock.yaml

@@ -114,9 +114,6 @@ dependencies:
   react-i18next:
     specifier: ^14.1.0
     version: 14.1.0(i18next@23.10.1)(react-dom@18.2.0)(react@18.2.0)
-  react-lazy-load-image-component:
-    specifier: ^1.6.0
-    version: 1.6.0(react-dom@18.2.0)(react@18.2.0)
   react-lazy-with-preload:
     specifier: ^2.2.1
     version: 2.2.1
@@ -4922,10 +4919,6 @@ packages:
     resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==}
     dev: true
 
-  /lodash.throttle@4.1.1:
-    resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==}
-    dev: false
-
   /lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
     dev: true
@@ -5697,18 +5690,6 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
 
-  /react-lazy-load-image-component@1.6.0(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-8KFkDTgjh+0+PVbH+cx0AgxLGbdTsxWMnxXzU5HEUztqewk9ufQAu8cstjZhyvtMIPsdMcPZfA0WAa7HtjQbBQ==}
-    peerDependencies:
-      react: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
-      react-dom: ^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x
-    dependencies:
-      lodash.debounce: 4.0.8
-      lodash.throttle: 4.1.1
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
   /react-lazy-with-preload@2.2.1:
     resolution: {integrity: sha512-ONSb8gizLE5jFpdHAclZ6EAAKuFX2JydnFXPPPjoUImZlLjGtKzyBS8SJgJq7CpLgsGKh9QCZdugJyEEOVC16Q==}
     dev: false
@@ -7253,6 +7234,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

src/pages/Discover.tsx

@@ -1,9 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { LazyLoadImage } from "react-lazy-load-image-component";
 import { useNavigate } from "react-router-dom";
 
-import "react-lazy-load-image-component/src/effects/blur.css";
 import { ThinContainer } from "@/components/layout/ThinContainer";
 import { WideContainer } from "@/components/layout/WideContainer";
 import { HomeLayout } from "@/pages/layouts/HomeLayout";
@@ -81,19 +79,14 @@ export function Discover() {
   useEffect(() => {
     const fetchMoviesForCategory = async (category: Category) => {
       try {
-        const movies: any[] = [];
+        const data = await get<any>(category.endpoint, {
-        for (let page = 1; page <= pagesToFetch; page += 1) {
+          api_key: conf().TMDB_READ_API_KEY,
-          const data = await get<any>(category.endpoint, {
+          language: "en-US",
-            api_key: conf().TMDB_READ_API_KEY,
+        });
-            language: "en-US",
-            page: page.toString(),
-          });
 
-          movies.push(...data.results);
-        }
         setCategoryMovies((prevCategoryMovies) => ({
           ...prevCategoryMovies,
-          [category.name]: movies,
+          [category.name]: data.results,
         }));
       } catch (error) {
         console.error(
@@ -142,21 +135,14 @@ export function Discover() {
   useEffect(() => {
     const fetchTVShowsForGenre = async (genreId: number) => {
       try {
-        const tvShows: any[] = [];
+        const data = await get<any>("/discover/tv", {
-        for (let page = 1; page <= 4; page += 1) {
+          api_key: conf().TMDB_READ_API_KEY,
-          // Fetch only 4 pages
+          with_genres: genreId.toString(),
-          const data = await get<any>("/discover/tv", {
+          language: "en-US",
-            api_key: conf().TMDB_READ_API_KEY,
+        });
-            with_genres: genreId.toString(),
-            language: "en-US",
-            page: page.toString(),
-          });
-
-          tvShows.push(...data.results);
-        }
         setTVShowGenres((prevTVShowGenres) => ({
           ...prevTVShowGenres,
-          [genreId]: tvShows,
+          [genreId]: data.results,
         }));
       } catch (error) {
         console.error(`Error fetching TV shows for genre ${genreId}:`, error);
@@ -283,11 +269,11 @@ export function Discover() {
               className="block text-center relative overflow-hidden transition-transform transform hover:scale-95 mr-5"
               style={{ flex: `0 0 ${movieWidth}` }} // Set a fixed width for each movie
             >
-              <LazyLoadImage
+              <img
                 src={`https://image.tmdb.org/t/p/w500${media.poster_path}`}
                 alt={isTVShow ? media.name : media.title}
                 className="rounded-xl"
-                effect="blur"
+                loading="lazy"
                 style={{
                   width: "100%",
                   height: "100%",