From 02132268821d26cfa1bdc16bf3cbaa3cc6f20afd Mon Sep 17 00:00:00 2001
From: Ajay Ghanwat <ajayghanwata.a@gmail.com>
Date: Mon, 13 Apr 2026 12:56:35 +0530
Subject: [PATCH] feat: update contact form for instant response UX with
 loading states and clear feedback

---
 src/pages/contact.astro | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 351e1c7..33d8e30 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -437,7 +437,7 @@ const trustStats = [
                 </svg>
               </div>
               <h3 class="text-2xl font-bold text-secondary-900 dark:text-secondary-100 mb-2">Message Sent!</h3>
-              <p class="text-secondary-600 dark:text-secondary-400 mb-6">Thank you for reaching out. We'll get back to you within 24 hours.</p>
+              <p class="text-secondary-600 dark:text-secondary-400 mb-6">Message received! We will get back to you shortly.</p>
               <button
                 id="send-another"
                 class="inline-flex items-center gap-2 text-primary hover:text-primary-700 font-medium text-sm transition-colors"
@@ -1022,10 +1022,18 @@ const trustStats = [
       let success = false;
       let errorMessage = 'Something went wrong. Please try again.';
 
+      // Track when loading started for minimum display time
+      const loadingStart = Date.now();
+
       try {
+        // Set up a 10-second timeout using AbortController
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 10_000);
+
         const response = await fetch('/api/contact', {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
+          signal: controller.signal,
           body: JSON.stringify({
             name: (form.elements.namedItem('name') as HTMLInputElement)?.value.trim(),
             email: (form.elements.namedItem('email') as HTMLInputElement)?.value.trim(),
@@ -1036,6 +1044,8 @@ const trustStats = [
           }),
         });
 
+        clearTimeout(timeoutId);
+
         const data = await response.json() as { success: boolean; message?: string; error?: string };
 
         if (response.ok && data.success) {
@@ -1043,8 +1053,18 @@ const trustStats = [
         } else {
           errorMessage = data.error ?? 'Failed to send message. Please try again.';
         }
-      } catch {
-        errorMessage = 'Network error. Please check your connection and try again.';
+      } catch (err) {
+        if (err instanceof DOMException && err.name === 'AbortError') {
+          errorMessage = 'Request timed out. Please check your connection and try again.';
+        } else {
+          errorMessage = 'Network error. Please check your connection and try again.';
+        }
+      }
+
+      // Ensure loading state is shown for at least 300ms to avoid jarring flash
+      const elapsed = Date.now() - loadingStart;
+      if (elapsed < 300) {
+        await new Promise((resolve) => setTimeout(resolve, 300 - elapsed));
       }
 
       // Track analytics
@@ -1062,7 +1082,7 @@ const trustStats = [
         // Show success state inline
         form.classList.add('hidden');
         if (successState) successState.classList.remove('hidden');
-        showToast("Message sent! We'll get back to you within 24 hours.", 'success');
+        showToast('Message received! We will get back to you shortly.', 'success');
       } else {
         showToast(errorMessage, 'error');
       }