feat: lazy everywhere

This commit is contained in:
Julien Froidefond
2025-02-16 16:10:07 +01:00
parent 938e0461ae
commit cd6622f72b
3 changed files with 10 additions and 4 deletions

View File

@@ -94,6 +94,8 @@ function SeriesCard({ series, onClick }: SeriesCardProps) {
sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw" sizes="(max-width: 640px) 33vw, (max-width: 1024px) 20vw, 20vw"
onError={() => setImageError(true)} onError={() => setImageError(true)}
onLoad={() => setIsLoading(false)} onLoad={() => setIsLoading(false)}
loading="lazy"
quality={50}
/> />
</> </>
) : ( ) : (

View File

@@ -117,6 +117,8 @@ function BookImage({ book, getBookThumbnailUrl, isCompleted }: BookImageProps) {
sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw" sizes="(min-width: 1024px) 16.66vw, (min-width: 768px) 25vw, (min-width: 640px) 33.33vw, 50vw"
onError={() => setImageError(true)} onError={() => setImageError(true)}
onLoad={() => setIsLoading(false)} onLoad={() => setIsLoading(false)}
loading="lazy"
quality={50}
/> />
</div> </div>
); );
@@ -177,6 +179,8 @@ function BookCard({ book, onClick, getBookThumbnailUrl }: BookCardProps) {
className="object-cover" className="object-cover"
sizes="(max-width: 640px) 33vw, (max-width: 1024px) 16.666vw, 16.666vw" sizes="(max-width: 640px) 33vw, (max-width: 1024px) 16.666vw, 16.666vw"
onError={() => setImageError(true)} onError={() => setImageError(true)}
loading="lazy"
quality={50}
/> />
) : ( ) : (
<div className="w-full h-full flex items-center justify-center"> <div className="w-full h-full flex items-center justify-center">

View File

@@ -149,8 +149,8 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
"object-cover blur-2xl scale-110 transition-opacity duration-300", "object-cover blur-2xl scale-110 transition-opacity duration-300",
imageLoading ? "opacity-0" : "opacity-10" imageLoading ? "opacity-0" : "opacity-10"
)} )}
priority loading="lazy"
unoptimized quality={25}
onLoad={() => setImageLoading(false)} onLoad={() => setImageLoading(false)}
/> />
</div> </div>
@@ -176,8 +176,8 @@ export const SeriesHeader = ({ series, onSeriesUpdate }: SeriesHeaderProps) => {
)} )}
onError={() => setImageError(true)} onError={() => setImageError(true)}
onLoad={() => setImageLoading(false)} onLoad={() => setImageLoading(false)}
priority loading="lazy"
unoptimized quality={75}
/> />
</div> </div>
) : ( ) : (