From 01b0a7e81cf625abca083f052df61700b5c72983 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laurent=20Tr=C3=A9guier?= <laurent.treguier@fyreplace.app>
Date: Tue, 8 Oct 2024 16:29:26 +0200
Subject: [PATCH] Let API shrink images

---
 src/lib/data/translations.json             |  4 ++--
 src/routes/settings/+page.svelte           | 15 ++++++------
 src/routes/settings/editable-avatar.svelte | 27 +++++++++++++++-------
 3 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/lib/data/translations.json b/src/lib/data/translations.json
index 5d72cbb..e8ca297 100644
--- a/src/lib/data/translations.json
+++ b/src/lib/data/translations.json
@@ -57,11 +57,11 @@
 				"errors": {
 					"413": {
 						"title": "File too large",
-						"message": "This file is too heavy; please select a file under 1M."
+						"message": "Uploaded files can only go up to 10M."
 					},
 					"415": {
 						"title": "Unsupported file format",
-						"message": "This file you have selected is not supported."
+						"message": "The type of file you have selected is not supported."
 					}
 				}
 			},
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 566f13b..470384c 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -11,11 +11,12 @@
 	import List from '$lib/components/list.svelte';
 	import Button from '$lib/components/inputs/button.svelte';
 	import EditableAvatar from './editable-avatar.svelte';
+	import Loader from '$lib/components/inputs/button/loader.svelte';
 
 	const isRegistering = writable(false);
 	const token = writable<string | null>(null);
 	let currentUser: User | null = null;
-	let isAvatarLoading = false;
+	let isLoadingAvatar = false;
 
 	onMount(() =>
 		token.subscribe(async ($token) => {
@@ -37,7 +38,7 @@
 		return call(
 			async () => {
 				try {
-					isAvatarLoading = true;
+					isLoadingAvatar = true;
 					const client = await getUsersClient();
 					const avatar = await client.setCurrentUserAvatar(event.detail);
 
@@ -45,7 +46,7 @@
 						currentUser = { ...currentUser, avatar };
 					}
 				} finally {
-					isAvatarLoading = false;
+					isLoadingAvatar = false;
 				}
 			},
 			async (error) => {
@@ -65,7 +66,7 @@
 		return call(
 			async () => {
 				try {
-					isAvatarLoading = true;
+					isLoadingAvatar = true;
 					const client = await getUsersClient();
 					await client.deleteCurrentUserAvatar();
 
@@ -73,7 +74,7 @@
 						currentUser = { ...currentUser, avatar: '' };
 					}
 				} finally {
-					isAvatarLoading = false;
+					isLoadingAvatar = false;
 				}
 			},
 			async () => new DisplayableError()
@@ -101,14 +102,14 @@
 				<tr>
 					<td>
 						<div class="avatar-wrapper">
-							<EditableAvatar user={currentUser} on:file={updateAvatar} />
+							<EditableAvatar user={currentUser} loading={isLoadingAvatar} on:file={updateAvatar} />
 						</div>
 					</td>
 					<td>
 						<Button
 							type="button"
 							disabled={!currentUser?.avatar}
-							loading={isAvatarLoading}
+							loading={isLoadingAvatar}
 							on:click={removeAvatar}
 						>
 							{t('settings.profile.avatar.remove')}
diff --git a/src/routes/settings/editable-avatar.svelte b/src/routes/settings/editable-avatar.svelte
index 1f39c07..fdd3032 100644
--- a/src/routes/settings/editable-avatar.svelte
+++ b/src/routes/settings/editable-avatar.svelte
@@ -5,19 +5,27 @@
 	import ImagePicker from '$lib/components/inputs/image-picker.svelte';
 	import Icon from '$lib/components/icon.svelte';
 	import EditIcon from '$lib/components/icons/edit.svelte';
+	import Loader from '$lib/components/inputs/button/loader.svelte';
 
 	export let user: User | null = null;
+	export let loading = false;
 </script>
 
 <ImagePicker title={t('settings.profile.avatar.change')} on:file>
 	<Avatar {user} size={100} />
-	<span class="edit-icon">
-		<Icon size="32px"><EditIcon /></Icon>
+	<span class="overlay" class:loading>
+		{#if loading}
+			<Loader />
+		{:else}
+			<span class="edit-icon">
+				<Icon size="32px"><EditIcon /></Icon>
+			</span>
+		{/if}
 	</span>
 </ImagePicker>
 
 <style lang="scss">
-	.edit-icon {
+	.overlay {
 		position: absolute;
 		width: 100%;
 		height: 100%;
@@ -31,12 +39,15 @@
 		cursor: pointer;
 		transition: 0.1s;
 
-		@media (hover: none) {
-			display: none;
-		}
+		&:not(.loading) {
+			@media (hover: none) {
+				display: none;
+			}
 
-		&:not(:hover) {
-			opacity: 0;
+			&:not(:hover),
+			&:not(:hover) .edit-icon {
+				opacity: 0;
+			}
 		}
 	}
 </style>