external/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2025-03-09 15:40:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add lazy loading to images and thumbs

Browse source
This commit is contained in:
Zamitto 2024-05-12 16:51:25 -03:00
parent 483f069d81
commit b0803fa28d
1 changed files with 3 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/renderer/src/pages/game-details/gallery-slider.tsx
View file

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