fix: null-safe DOM selectors for post-submit and regenerating states

The user's layout restructure renamed .regenerate-bar → .regen-column,
.submit-bar → .submit-column, and .overall-section → .bottom-section.
The JS still referenced the old class names, causing querySelector to
return null and showPostSubmitState() / showRegeneratingState() to
silently crash. This meant Submit and Regenerate buttons appeared to
work (DOM elements updated, HTTP POST succeeded) but the visual
feedback (disabled inputs, spinner, success message) never appeared.

Fix: use fallback selectors that check both old and new class names,
with null guards so a missing element doesn't crash the function.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-27 09:59:50 -06:00
parent 1fbf6c4b46
commit 8825332d04
+8 -4
View File
@@ -483,7 +483,8 @@ export function generateCompareHtml(images: string[]): string {
function showPostSubmitState() {
disableAllInputs();
document.querySelector('.regenerate-bar').style.display = 'none';
var _regenBar = document.querySelector('.regenerate-bar') || document.querySelector('.regen-column');
if (_regenBar) _regenBar.style.display = 'none';
document.getElementById('submit-btn').style.display = 'none';
document.getElementById('success-msg').style.display = 'block';
document.getElementById('success-msg').innerHTML =
@@ -498,9 +499,12 @@ export function generateCompareHtml(images: string[]): string {
'<div style="font-size:24px;margin-bottom:12px;">Generating new designs...</div>' +
'<div class="skeleton" style="width:60px;height:60px;border-radius:50%;margin:0 auto;"></div>' +
'</div>';
document.querySelector('.regenerate-bar').style.display = 'none';
document.querySelector('.submit-bar').style.display = 'none';
document.querySelector('.overall-section').style.display = 'none';
var _regenBar = document.querySelector('.regenerate-bar') || document.querySelector('.regen-column');
if (_regenBar) _regenBar.style.display = 'none';
var _submitBar = document.querySelector('.submit-bar') || document.querySelector('.submit-column');
if (_submitBar) _submitBar.style.display = 'none';
var _overallSec = document.querySelector('.overall-section') || document.querySelector('.bottom-section');
if (_overallSec) _overallSec.style.display = 'none';
startProgressPolling();
}