feat: auto-load images when user stops typing link (500ms debounce)

src/lib/components/wishlist/ItemForm.svelte

@@ -49,17 +49,16 @@
   let color = $state<string | null>(item?.color || null);
   let scrapedImages = $state<string[]>([]);
   let isLoadingImages = $state(false);
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
   // Form action based on mode
   const formAction = isEdit ? '?/updateItem' : '?/addItem';
   const submitLabel = isEdit ? t.form.saveChanges : t.wishlist.addWish;
   const titleLabel = isEdit ? t.wishlist.editWish : t.form.addNewWish;
 
-  async function handleLinkChange(event: Event) {
+  async function scrapeImages(url: string) {
-    const input = event.target as HTMLInputElement;
+    if (!url || !url.startsWith('http')) return;
-    linkUrl = input.value;
     
-    if (linkUrl && linkUrl.startsWith('http')) {
     isLoadingImages = true;
     scrapedImages = [];
 
@@ -67,7 +66,7 @@
       const response = await fetch('/api/scrape-images', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ url: linkUrl })
+        body: JSON.stringify({ url })
       });
 
       if (response.ok) {
@@ -80,6 +79,20 @@
       isLoadingImages = false;
     }
   }
+
+  function handleLinkInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    linkUrl = input.value;
+    
+    // Clear existing timer
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    
+    // Set new timer to scrape after user stops typing for 500ms
+    debounceTimer = setTimeout(() => {
+      scrapeImages(linkUrl);
+    }, 500);
   }
 
   function handleColorChange() {
@@ -141,7 +154,7 @@
             type="url"
             placeholder="https://..."
             bind:value={linkUrl}
-            oninput={handleLinkChange}
+            oninput={handleLinkInput}
           />
         </div>