visuals

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

@@ -117,10 +117,13 @@
 
 				<Dialog.Footer class="mt-4">
 					<div class="flex justify-between w-full">
-						<Button variant="destructive"
-										onclick={() => {approveDenyItem({id: item?.id || 0, approved: false}); invalidateAll();}}>
+						<Dialog.Close
+							type="button"
+							class={buttonVariants({ variant: "destructive" })}
+							onclick={async () => {await approveDenyItem({ id: item?.id || 0, approved: false }); await invalidateAll(); }}
+						>
 							Delete
-						</Button>
+						</Dialog.Close>
 
 						<div>
 

src/lib/components/custom/loading-spinner.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { onMount, onDestroy } from 'svelte';
+
+	export let src = '/mdev_triangle_loading.riv';
+	export let stateMachine = null;
+	export let size = 120;
+
+
+	let canvas;
+	let riveInstance;
+
+	onMount(async () => {
+		if (typeof window === 'undefined') return;
+
+		const mod = await import('@rive-app/canvas');
+
+		// Handle BOTH CJS and ESM shapes safely
+		const Rive = mod?.Rive || mod?.default?.Rive || mod?.default;
+
+		if (!Rive) {
+			console.error('Rive failed to load:', mod);
+			return;
+		}
+
+		riveInstance = new Rive({
+			src,
+			canvas,
+			autoplay: true,
+			// stateMachines: stateMachine || undefined,
+			onLoad: () => {
+				riveInstance.resizeDrawingSurfaceToCanvas();
+			}
+		});
+	});
+
+	onDestroy(() => {
+		riveInstance?.cleanup?.();
+	});
+</script>
+
+<canvas bind:this={canvas} width={size} height={size} />

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>