feat: add lazy loading for images in statistics and home pages (#502)

fix: min/max filesize being returned undefined
rivenmedia · Jul 10, 2024 · fadab73 · fadab73
1 parent 71e6365
commit fadab73
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 139 deletions.
diff --git a/frontend/src/lib/components/home-items.svelte b/frontend/src/lib/components/home-items.svelte
@@ -43,6 +43,7 @@
 							<img
 								src="https://image.tmdb.org/t/p/w342{item.poster_path}"
 								alt={item.title || item.name}
+								loading="lazy"
 								class="h-full w-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
 							/>
 							<div
@@ -84,6 +85,7 @@
 								<img
 									src={`https://image.tmdb.org/t/p/w342${item.poster_path}`}
 									alt={item.title || item.name}
+									loading="lazy"
 									class="h-full w-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
 								/>
 							</div>

diff --git a/frontend/src/lib/components/service-status.svelte b/frontend/src/lib/components/service-status.svelte
diff --git a/frontend/src/lib/forms/helpers.ts b/frontend/src/lib/forms/helpers.ts
@@ -69,10 +69,10 @@ export function generalSettingsToPass(data: any) {
 		rclone_path: data.data.symlink.rclone_path,
 		library_path: data.data.symlink.library_path,
 		separate_anime_dirs: data.data.symlink.separate_anime_dirs,
-		movie_filesize_min: data.data.movie_filesize_min,
-		movie_filesize_max: data.data.movie_filesize_max,
-		episode_filesize_min: data.data.episode_filesize_min,
-		episode_filesize_max: data.data.episode_filesize_max,
+		movie_filesize_min: data.data.downloaders.movie_filesize_min,
+		movie_filesize_max: data.data.downloaders.movie_filesize_max,
+		episode_filesize_min: data.data.downloaders.episode_filesize_min,
+		episode_filesize_max: data.data.downloaders.episode_filesize_max,
 		realdebrid_enabled: data.data.downloaders.real_debrid.enabled,
 		realdebrid_api_key: data.data.downloaders.real_debrid?.api_key || '',
 		realdebrid_proxy_enabled: data.data.downloaders.real_debrid?.proxy_enabled || false,

diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
@@ -138,6 +138,7 @@
 										><img
 											src="https://image.tmdb.org/t/p/w342{trendingAll.backdrop_path}"
 											alt={trendingAll.name}
+											loading="lazy"
 											class="size-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
 										/></span
 									>

diff --git a/frontend/src/routes/settings/general/+page.server.ts b/frontend/src/routes/settings/general/+page.server.ts
@@ -26,7 +26,9 @@ export const load: PageServerLoad = async ({ fetch }) => {
 	}
 
 	let data: any = await getPartialSettings();
+	console.log('data', data);
 	let toPassToSchema = generalSettingsToPass(data);
+	console.log('toPassToSchema', toPassToSchema);
 
 	return {
 		form: await superValidate(toPassToSchema, zod(generalSettingsSchema))

diff --git a/frontend/src/routes/statistics/+page.svelte b/frontend/src/routes/statistics/+page.svelte
@@ -243,6 +243,7 @@
 						<img
 							src="{baseUrl}{item.imdb_id}/img"
 							alt={item.title}
+							loading="lazy"
 							class="h-full w-full object-cover object-center transition-all duration-300 ease-in-out group-hover:scale-105"
 						/>
 						<!-- <div