From e8e4c3ae2363cf3e4f74adffdc1ee8fc17c95551 Mon Sep 17 00:00:00 2001
From: Francis Secada <francis.secada@gmail.com>
Date: Wed, 4 Feb 2026 12:46:23 -0500
Subject: [PATCH] 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>
---
 src/frontend/templates/home.html | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/frontend/templates/home.html b/src/frontend/templates/home.html
index 9fae4a9..39c0aeb 100644
--- a/src/frontend/templates/home.html
+++ b/src/frontend/templates/home.html
@@ -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();