From fd7fb2690689c747b1a6de027512b6ca88350172 Mon Sep 17 00:00:00 2001 From: Exodus-MW Date: Thu, 4 Apr 2024 07:09:45 +0530 Subject: [PATCH] Optimized load times by using native lazy loading and reducing the content fetched --- package.json | 1 - pnpm-lock.yaml | 20 +------------------- src/pages/Discover.tsx | 40 +++++++++++++--------------------------- 3 files changed, 14 insertions(+), 47 deletions(-) diff --git a/package.json b/package.json index 123f121f..1a20b823 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8d40e20..43ff9ae1 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/pages/Discover.tsx b/src/pages/Discover.tsx index 44d0a2f0..576898bb 100644 --- a/src/pages/Discover.tsx +++ b/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[] = []; - for (let page = 1; page <= pagesToFetch; page += 1) { - const data = await get(category.endpoint, { - api_key: conf().TMDB_READ_API_KEY, - language: "en-US", - page: page.toString(), - }); + const data = await get(category.endpoint, { + api_key: conf().TMDB_READ_API_KEY, + language: "en-US", + }); - 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[] = []; - for (let page = 1; page <= 4; page += 1) { - // Fetch only 4 pages - const data = await get("/discover/tv", { - api_key: conf().TMDB_READ_API_KEY, - with_genres: genreId.toString(), - language: "en-US", - page: page.toString(), - }); - - tvShows.push(...data.results); - } + const data = await get("/discover/tv", { + api_key: conf().TMDB_READ_API_KEY, + with_genres: genreId.toString(), + language: "en-US", + }); 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 > -