feat: add lazy loading to images and thumbs

This commit is contained in:
Zamitto 2024-05-12 16:51:25 -03:00
parent 483f069d81
commit b0803fa28d

View File

@ -112,6 +112,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
(image: SteamScreenshot, i: number) => (
<img
key={"image-" + i}
loading="lazy"
className={styles.gallerySliderMedia}
src={image.path_full}
style={{ translate: `${-100 * mediaIndex}%` }}
@ -146,6 +147,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
gameDetails.movies?.map((video: SteamMovies, i: number) => (
<img
key={video.id}
loading="lazy"
onClick={() => setMediaIndex(i)}
src={video.thumbnail}
className={`${styles.gallerySliderMediaPreview} ${mediaIndex === i ? styles.gallerySliderMediaPreviewActive : ""}`}
@ -156,6 +158,7 @@ export function GallerySlider({ gameDetails }: GallerySliderProps) {
(image: SteamScreenshot, i: number) => (
<img
key={"image-thumb-" + i}
loading="lazy"
onClick={() =>
setMediaIndex(
i + (gameDetails.movies ? gameDetails.movies.length : 0)