From fadab73b6e8b3d9e6453f64e25a480b0f299a24a Mon Sep 17 00:00:00 2001
From: Ayush Sehrawat <69469790+AyushSehrawat@users.noreply.github.com>
Date: Wed, 10 Jul 2024 13:21:49 +0530
Subject: [PATCH] feat: add lazy loading for images in statistics and home
 pages (#502)

fix: min/max filesize being returned undefined
---
 frontend/src/lib/components/home-items.svelte |   2 +
 .../src/lib/components/service-status.svelte  | 135 ------------------
 frontend/src/lib/forms/helpers.ts             |   8 +-
 frontend/src/routes/+page.svelte              |   1 +
 .../routes/settings/general/+page.server.ts   |   2 +
 frontend/src/routes/statistics/+page.svelte   |   1 +
 6 files changed, 10 insertions(+), 139 deletions(-)
 delete mode 100644 frontend/src/lib/components/service-status.svelte

diff --git a/frontend/src/lib/components/home-items.svelte b/frontend/src/lib/components/home-items.svelte
index b1430dbe..e0ebabf3 100644
--- 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
deleted file mode 100644
index 69356c9a..00000000
--- a/frontend/src/lib/components/service-status.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-	const servicesObject: Record<string, string> = {
-		symlinklibrary: 'Symlink Library',
-		plexlibrary: 'Plex Library',
-		traktindexer: 'Trakt Indexer',
-		overseerr: 'Overseerr',
-		plex_watchlist: 'Plex Watchlist',
-		listrr: 'Listrr',
-		mdblist: 'MDB List',
-		trakt: 'Trakt',
-		scraping: 'Scraping',
-		annatar: 'Annatar',
-		torrentio: 'Torrentio',
-		knightcrawler: 'Knightcrawler',
-		orionoid: 'Orionoid',
-		jackett: 'Jackett',
-		torbox: 'Torbox',
-		mediafusion: 'Mediafusion',
-		symlink: 'Symlink',
-		plexupdater: 'Plex Updater',
-		realdebrid: 'Real Debrid',
-		torbox_downloader: 'Torbox Downloader'
-	};
-
-	const coreServices = ['symlinklibrary', 'plexlibrary', 'symlink'];
-	const downloaderServices = ['realdebrid', 'torbox', 'torbox_downloader'];
-	const contentServices = ['mdblist', 'overseerr', 'plex_watchlist', 'listrr', 'trakt'];
-	const scrapingServices = [
-		'torrentio',
-		'knightcrawler',
-		'annatar',
-		'jackett',
-		'orionoid',
-		'mediafusion',
-		'torbox'
-	];
-
-	function sortServices(services: string[], data: Record<string, boolean>) {
-		let sortedData = {} as Record<string, boolean>;
-
-		for (let service of services) {
-			sortedData[service] = data[service];
-			if (!data[service]) {
-				data[service] = false;
-			}
-		}
-		return sortedData as Record<string, boolean>;
-	}
-
-	export let data: Record<string, boolean>;
-	const coreServicesData = sortServices(coreServices, data);
-	const downloaderServicesData = sortServices(downloaderServices, data);
-	const contentServicesData = sortServices(contentServices, data);
-	const scrapingServicesData = sortServices(scrapingServices, data);
-
-	const coreServicesStatus = Object.keys(coreServicesData).map((service) => {
-		return {
-			name: servicesObject[service],
-			status: coreServicesData[service]
-		};
-	});
-
-	const downloaderServicesStatus = Object.keys(downloaderServicesData).map((service) => {
-		return {
-			name: servicesObject[service],
-			status: downloaderServicesData[service]
-		};
-	});
-
-	const contentServicesStatus = Object.keys(contentServicesData).map((service) => {
-		return {
-			name: servicesObject[service],
-			status: contentServicesData[service]
-		};
-	});
-
-	const scrapingServicesStatus = Object.keys(scrapingServicesData).map((service) => {
-		return {
-			name: servicesObject[service],
-			status: scrapingServicesData[service]
-		};
-	});
-
-	type ServiceStatus = {
-		name: string;
-		services: any;
-	};
-
-	const servicesStatus: ServiceStatus[] = [
-		{
-			name: 'Core services',
-			services: coreServicesStatus
-		},
-		{
-			name: 'Downloader services',
-			services: downloaderServicesStatus
-		},
-		{
-			name: 'Content services',
-			services: contentServicesStatus
-		},
-		{
-			name: 'Scraping services',
-			services: scrapingServicesStatus
-		}
-	];
-</script>
-
-<div class="flex flex-col items-start">
-	{#each servicesStatus as status}
-		<div class="mb-2">
-			<h2 class="text-sm md:text-base">{status.name}</h2>
-			{#each status.services as service}
-				<div class="flex items-center gap-2">
-					{#if service.status}
-						<span class="relative flex h-3 w-3">
-							<span
-								class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"
-							></span>
-							<span class="relative inline-flex h-3 w-3 rounded-full bg-green-500"></span>
-						</span>
-					{:else}
-						<span class="relative flex h-3 w-3">
-							<span
-								class="absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75"
-							></span>
-							<span class="relative inline-flex h-3 w-3 rounded-full bg-red-500"></span>
-						</span>
-					{/if}
-					<p class="text-muted-foreground">{service.name}</p>
-				</div>
-			{/each}
-		</div>
-	{/each}
-</div>
diff --git a/frontend/src/lib/forms/helpers.ts b/frontend/src/lib/forms/helpers.ts
index c0288c7a..bf9f3358 100644
--- 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
index e62a657b..1251fe80 100644
--- 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
index 1a339b16..0d14eff6 100644
--- 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
index 99aad5c7..cd7ada03 100644
--- 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