Improve social ads generator user experience

UX IMPROVEMENTS:
- Reduce excessive toast notifications - only show for critical actions
- Add smooth auto-scroll when processing starts (scrolls to processing section)
- Add smooth auto-scroll when results appear (scrolls to results section)
- Disable submit button during processing with loading state ( Generating...)
- Remove unnecessary toasts for download (file download is confirmation enough)
- Remove toast for form reset (visual feedback is sufficient)
- Simplify copy notification text
- Add scroll to form when reset button is clicked

BEHAVIOR CHANGES:
- Toast notifications now only appear for:
  - Form validation errors (important)
  - Processing completion success/failure (important)
  - Copy to clipboard success/failure (user needs feedback)
- Auto-scroll provides visual feedback for processing flow
- Button states clearly indicate processing status
- Smoother overall user interaction flow

These changes create a more polished, less noisy user experience while maintaining
important feedback for critical actions.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude 2025-07-25 15:30:30 +05:30
parent 5cacfb19d0
commit e75e814567

View File

@ -88,16 +88,29 @@ const SocialAdsUtils = {
const processingStatus = document.getElementById('processingStatus');
const resultsContainer = document.getElementById('resultsContainer');
if (processingStatus) processingStatus.style.display = 'block';
if (resultsContainer) resultsContainer.style.display = 'none';
if (processingStatus) {
processingStatus.style.display = 'block';
this.showToast('🚀 Creating your social ads...', 'success');
// Smooth scroll to processing section
processingStatus.scrollIntoView({
behavior: 'smooth',
block: 'center'
});
}
if (resultsContainer) resultsContainer.style.display = 'none';
},
// Hide processing status
hideProcessing() {
const processingStatus = document.getElementById('processingStatus');
if (processingStatus) processingStatus.style.display = 'none';
// Re-enable submit button
const submitBtn = document.getElementById('generateBtn');
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.textContent = '📢 Generate Social Ads (4.00 AED)';
}
},
// Display social ads results
@ -120,9 +133,17 @@ const SocialAdsUtils = {
this.renderSecureContent(resultsContent, adContent);
}
// Show results container
// Show results container and scroll to it
if (resultsContainer) {
resultsContainer.style.display = 'block';
// Smooth scroll to results after a brief delay for rendering
setTimeout(() => {
resultsContainer.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}, 300);
}
// Update wallet balance if provided
@ -130,6 +151,7 @@ const SocialAdsUtils = {
this.updateWalletBalance(result.wallet_balance);
}
// Show success notification only for final result
this.showToast('✅ Social ads created successfully!', 'success');
} else if (result.error) {
this.hideProcessing();
@ -329,9 +351,9 @@ function copyResults() {
if (content) {
const text = content.textContent || '';
navigator.clipboard.writeText(text).then(() => {
SocialAdsUtils.showToast('📋 Social ads copied to clipboard!', 'success');
SocialAdsUtils.showToast('📋 Copied to clipboard!', 'success');
}).catch(() => {
SocialAdsUtils.showToast('❌ Failed to copy to clipboard', 'error');
SocialAdsUtils.showToast('❌ Copy failed', 'error');
});
}
}
@ -348,7 +370,7 @@ function downloadResults() {
a.download = 'social-ads-results.txt';
a.click();
URL.revokeObjectURL(url);
SocialAdsUtils.showToast('💾 Social ads downloaded!', 'success');
// No toast for download - file download is confirmation enough
}
}
@ -369,7 +391,13 @@ function resetForm() {
const fields = ['description', 'social_platform', 'include_emoji'];
fields.forEach(fieldName => clearFieldError(fieldName));
SocialAdsUtils.showToast('🔄 Form reset - ready for new social ads', 'success');
// Scroll back to form
const form_section = document.getElementById('agentForm');
if (form_section) {
form_section.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
// No toast for reset - visual feedback is enough
}
// Quick Agent Access Functions
@ -444,9 +472,15 @@ function handleFormSubmission(e) {
return;
}
// Show processing status
// Show processing status and disable submit button
SocialAdsUtils.showProcessing();
const submitBtn = document.getElementById('generateBtn');
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = '⏳ Generating...';
}
// Submit form with AJAX
const formData = new FormData(e.target);