fix: stop container flashing and halt polling when complete

Remove double wrapping and add DOM-based polling stop condition to
prevent container flashing and endless polling.

Problems:
1. Status/results containers flash during updates
2. Polling continues forever even after results load
3. Double wrapping: home.html box + backend template section

Root Cause:
- home.html wrapped backend templates in <div class="box">
- Backend templates return complete <section> elements with styling
- No condition to stop polling after results appear

Solution:
- Remove class="box" wrapper from home.html (backend handles styling)
- Add DOM check to stop polling: [!document.querySelector('#result-container')]
- Polling stops once #result-container appears in DOM

Changes:
- Removed class="box" from status div
- Removed class="box" from results div
- Added polling stop condition to both divs
- HTMX checks DOM every second, stops when results exist

Result:
- No more flashing containers (single wrapper)
- Smooth content updates without re-rendering parent
- Polling stops automatically when analysis complete
- Better performance (no unnecessary requests)

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

View File

@ -105,10 +105,9 @@
<!-- Status Updates -->
<div x-show="analyzing && !hasResults"
x-transition
class="box"
id="status"
hx-get={{ url_for('get_status') }}
hx-trigger="every 1s"
hx-trigger="every 1s[!document.querySelector('#result-container')]"
hx-swap="innerHTML"
@htmx:after-request="
const response = $event.detail.xhr.response.trim();
@ -121,10 +120,9 @@
<!-- Results -->
<div x-show="hasResults"
x-transition
class="box"
id="result"
hx-get={{ url_for('get_result') }}
hx-trigger="every 1s"
hx-trigger="every 1s[!document.querySelector('#result-container')]"
hx-swap="innerHTML"
@htmx:after-request="
const response = $event.detail.xhr.response.trim();