WorkRoot/CompanySite
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update contact form for instant response UX with loading states and clear feedback

Browse Source
This commit is contained in:
Ajay Ghanwat
2026-04-13 12:56:35 +05:30
parent 4d882f1dc7
commit 0213226882
1 changed files with 24 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/contact.astro
+24 -4
View File
@@ -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');
}