mirror of https://github.com/sussy-code/smov.git
Optimized load times by using native lazy loading and reducing the content fetched
This commit is contained in:
Exodus-MW
parent
ac064c4be4
commit
fd7fb26906
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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<any>(category.endpoint, {
|
||||
api_key: conf().TMDB_READ_API_KEY,
|
||||
language: "en-US",
|
||||
page: page.toString(),
|
||||
});
|
||||
const data = await get<any>(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<any>("/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<any>("/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
|
||||
>
|
||||
<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%",
|
||||
|
|
|
|||
Loading…
Reference in New Issue