visuals

src/lib/components/custom/submit-item-dialog.svelte

@@ -6,7 +6,7 @@
 	import { Label } from '$lib/components/ui/label';
 	import * as Field from '$lib/components/ui/field';
 	import { fileToBase64 } from '$lib/shared';
-
+	import LoadingSpinner from './loading-spinner.svelte';
 	import ImageUpload from '$lib/components/custom/image-upload/image-upload.svelte';
 	import { genDescription } from '$lib/db/items.remote';
 	import { EMAIL_REGEX_STRING } from '$lib/consts';
@@ -18,6 +18,7 @@
 	let isGenerating = $state(false);
 
 	async function onSelect(file: File) {
+
 		isGenerating = true;
 
 		const base64 = await fileToBase64(file);
@@ -69,7 +70,11 @@
 					/>
 				</Field.Field>
 
-				<RadioGroup.Root name="location" bind:value={itemLocation}>
+
+				<RadioGroup.Root name="location" bind:value={itemLocation} required>
+					<Field.Label for="location">
+						Where is it? <span class="text-error">*</span>
+					</Field.Label>
 					<div class="flex items-center space-x-2">
 						<RadioGroup.Item value="finderPossession" id="finderPossession" />
 						<Label for="finderPossession">
@@ -115,8 +120,11 @@
 </Dialog.Root>
 
 
-{#if isGenerating}
-	<div class="fixed inset-0 bg-black/75 z-999999 w-screen h-screen justify-center items-center flex">
-		<p class="text-6xl text-primary">Loading...</p>
-	</div>
-{/if}
+<div
+	class="fixed inset-0 bg-black/75 z-[999999] w-screen h-screen flex justify-center items-center transition-opacity duration-150"
+	class:opacity-0={!isGenerating}
+	class:pointer-events-none={!isGenerating}
+>
+	<LoadingSpinner size={150} />
+	<p class="text-6xl ml-4">Loading...</p>
+</div>