fix flickering issue with consecutive error poll check

Author: hamzaimran08

templates/apps/deployment_progress.html

@@ -45,6 +45,9 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
           <div class="small text-muted mb-4" id="progress-next-step">
             We will open the app details page automatically when everything is ready.
           </div>
+          <div class="small text-warning d-none mb-4" id="progress-poll-warning">
+            Could not load the latest deployment update. Retrying automatically.
+          </div>
 
           <div class="d-flex flex-wrap gap-2">
             <a href="{{ form_url }}" class="btn btn-outline-secondary">Back to form</a>
@@ -102,6 +105,7 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
 let progressPoller = null;
 let successRedirectTimer = null;
 let consecutiveSuccessPolls = 0;
+let consecutiveErrorPolls = 0;
 let stepRevealTimer = null;
 let latestServerData = {
   deployment: {
@@ -128,6 +132,13 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
   }
 }
 
+function updatePollWarning(isVisible) {
+  const warning = document.getElementById("progress-poll-warning");
+  if (warning) {
+    warning.classList.toggle("d-none", !isVisible);
+  }
+}
+
 function copyProgressData(data = {}) {
   return {
     deployment: {...(data.deployment || {})},
@@ -379,6 +390,12 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
   updateHeader(data.deployment, steps);
 }
 
+function renderProgressShell(data) {
+  const steps = data.steps || [];
+  updateSummary(steps, data.deployment);
+  updateHeader(data.deployment, steps);
+}
+
 function areSameStep(left, right) {
   return JSON.stringify(left || null) === JSON.stringify(right || null);
 }
@@ -442,7 +459,7 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
       ...displayedProgressData,
       deployment: {...latestServerData.deployment}
     };
-    renderProgress(displayedProgressData);
+    renderProgressShell(displayedProgressData);
     maybeRedirectToDetails(displayedProgressData);
     return;
   }
@@ -485,6 +502,8 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
       return response.json();
     })
     .then(data => {
+      consecutiveErrorPolls = 0;
+      updatePollWarning(false);
       const fresh = copyProgressData(data);
 
       if (isProgressSuccessful(fresh)) {
@@ -509,10 +528,8 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
     })
     .catch(error => {
       console.error("Error fetching deployment progress:", error);
-      const inline = document.getElementById("progress-inline");
-      if (inline) {
-        inline.textContent = "Could not load the latest deployment update. Retrying automatically.";
-      }
+      consecutiveErrorPolls += 1;
+      updatePollWarning(consecutiveErrorPolls >= 2);
       throw error;
     });
 }