fix: correct HTMX polling and Alpine state integration

Fix status and results not loading by removing HTMX conditions that
don't react to Alpine state changes and simplifying visibility logic.

Problems:
1. HTMX trigger conditions [analyzing] don't react to Alpine state
2. Status div hidden initially (x-show with hasStatus requirement)
3. Chicken-and-egg: hasStatus needed to show, but only set on response
4. HTMX doesn't poll hidden elements effectively

Solution:
- Remove HTMX conditional triggers [analyzing], [analyzing && !hasResults]
- Simplify status visibility: x-show="analyzing && !hasResults"
- Let HTMX poll unconditionally with "every 1s"
- Alpine x-show controls visibility, HTMX polls when visible
- Cleaner event handlers with explicit response checking

Changes:
- Status: removed hasStatus from x-show condition
- Status: hx-trigger="every 1s" (no conditions)
- Results: hx-trigger="every 1s" (no conditions)
- Better response validation in @htmx:after-request

Result:
- Status updates appear immediately when analyzing starts
- Status polls continuously until results arrive
- Results polling works correctly
- Proper state transitions: analyzing → hasResults

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-04 12:30:15 -05:00
parent 904f19f8f8
commit d526569933

View File

@ -103,14 +103,19 @@
<section class="section"
id="analysis-content">
<!-- Status Updates -->
<div x-show="analyzing && hasStatus && !hasResults"
<div x-show="analyzing && !hasResults"
x-transition
class="box"
id="status"
hx-get={{ url_for('get_status') }}
hx-trigger="load, every 1s[analyzing]"
hx-trigger="every 1s"
hx-swap="innerHTML"
@htmx:after-request="if($event.detail.xhr.response.trim()) hasStatus = true">
@htmx:after-request="
const response = $event.detail.xhr.response.trim();
if (response && response.length > 0) {
hasStatus = true;
}
">
</div>
<!-- Results -->
@ -119,9 +124,15 @@
class="box"
id="result"
hx-get={{ url_for('get_result') }}
hx-trigger="load, every 1s[analyzing && !hasResults]"
hx-trigger="every 1s"
hx-swap="innerHTML"
@htmx:after-request="if($event.detail.xhr.response.trim() && $event.detail.xhr.response.includes('result-container')) { hasResults = true; analyzing = false; }">
@htmx:after-request="
const response = $event.detail.xhr.response.trim();
if (response && response.includes('result-container')) {
hasResults = true;
analyzing = false;
}
">
</div>
</section>
</div>