SS-1973 fix flickering text (#558)

Author: hamzaimran08

static/css/serve-elements.css

@@ -388,6 +388,29 @@ a.app-card-orcid-link.active::after {
     display: block;
 }
 
+.app-details-orcid-link {
+    display: inline-flex !important;
+    align-items: flex-start;
+    gap: 0.35rem;
+    line-height: 1.625;
+    text-decoration: none !important;
+}
+
+.app-details-orcid-link::after,
+.app-details-orcid-link:hover::after,
+.app-details-orcid-link:focus::after,
+.app-details-orcid-link.active::after {
+    content: none !important;
+}
+
+.app-details-orcid-icon {
+    width: 1rem;
+    height: 1rem;
+    display: block;
+    flex-shrink: 0;
+    margin-top: 0.3rem;
+}
+
 .orcid-id-link {
     color: var(--serve-lime) !important;
     text-decoration: none !important;

static/js/adaptive-polling.js

@@ -16,7 +16,8 @@
       if (stopped || document.hidden) {
         return;
       }
-      timer = window.setTimeout(run, delay);
+      const safeDelay = Number.isFinite(delay) && delay > 0 ? delay : errorDelay;
+      timer = window.setTimeout(run, safeDelay);
     };
 
     const run = async () => {

templates/apps/deployment_progress.html

@@ -45,9 +45,6 @@ <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>
@@ -75,6 +72,7 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
 const ACTIVE_STATUS_POLL_MS = 3000;
 const STABLE_STATUS_POLL_MS = 30000;
 const ERROR_STATUS_POLL_MS = 10000;
+const REQUIRED_ERROR_POLLS = 3;
 const TERMINAL_STEP_STATUSES = new Set(["success", "warning", "failed", "skipped"]);
 const STEP_ROW_CLASS_BY_STATUS = {
   failed: "is-failed",
@@ -107,6 +105,7 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
 let consecutiveSuccessPolls = 0;
 let consecutiveErrorPolls = 0;
 let stepRevealTimer = null;
+let pageIsUnloading = false;
 let latestServerData = {
   deployment: {
     status: "{{ deployment.status|default:'pending'|escapejs }}",
@@ -132,13 +131,17 @@ <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 showInlinePollError() {
+  const inline = document.getElementById("progress-inline");
+  if (inline) {
+    inline.textContent = "Could not load the latest deployment update. Retrying automatically.";
   }
 }
 
+function shouldIgnorePollError(error) {
+  return pageIsUnloading || document.hidden || error?.name === "AbortError";
+}
+
 function copyProgressData(data = {}) {
   return {
     deployment: {...(data.deployment || {})},
@@ -378,6 +381,7 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
   }
   if (!successRedirectTimer) {
     successRedirectTimer = window.setTimeout(() => {
+      progressPoller?.stop();
       window.location.assign(detailUrl);
     }, SUCCESS_REDIRECT_DELAY_MS);
   }
@@ -503,7 +507,6 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
     })
     .then(data => {
       consecutiveErrorPolls = 0;
-      updatePollWarning(false);
       const fresh = copyProgressData(data);
 
       if (isProgressSuccessful(fresh)) {
@@ -527,9 +530,14 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
       return canSlowPoll ? STABLE_STATUS_POLL_MS : ACTIVE_STATUS_POLL_MS;
     })
     .catch(error => {
+      if (shouldIgnorePollError(error)) {
+        return ERROR_STATUS_POLL_MS;
+      }
       console.error("Error fetching deployment progress:", error);
       consecutiveErrorPolls += 1;
-      updatePollWarning(consecutiveErrorPolls >= 2);
+      if (consecutiveErrorPolls >= REQUIRED_ERROR_POLLS) {
+        showInlinePollError();
+      }
       throw error;
     });
 }
@@ -547,11 +555,19 @@ <h1 class="h3 mb-2 deployment-progress-title" id="progress-title">We are prepari
   displayedProgressData = copyProgressData(latestServerData);
   renderProgress(displayedProgressData);
   maybeRedirectToDetails(displayedProgressData);
+  window.serveDeploymentProgressPoller?.stop();
   progressPoller = ServeAdaptivePolling.createPoller({
     poll: refreshProgress,
     getDelay: delay => delay,
     errorDelay: ERROR_STATUS_POLL_MS
   });
+  window.serveDeploymentProgressPoller = progressPoller;
+});
+
+window.addEventListener("pagehide", () => {
+  pageIsUnloading = true;
+  progressPoller?.stop();
+  window.serveDeploymentProgressPoller?.stop();
 });
 </script>
 {% endblock %}

templates/common/app_details.html

@@ -194,12 +194,12 @@ <h2 class="h5 mb-0">Creators</h2>
                         <a href="https://orcid.org/{{ creator.person_or_org.identifiers.0.identifier }}"
                           target="_blank"
                           rel="noopener"
-                          class="value-label fw-normal text-dark card-username text-decoration-none"
+                          class="value-label fw-normal text-dark card-username text-decoration-none app-details-orcid-link"
                           data-bs-toggle="tooltip"
                           data-bs-placement="top"
                           title="{% if creator.affiliations %}{% for aff in creator.affiliations %}{{ aff.name }}{% if not forloop.last %}, {% endif %}{% endfor %}{% else %}No affiliations{% endif %}">
-                            <img src="/static/images/orcid_16x16.png" alt="ORCID" width="16" height="16" class="me-1">
-                            {{ creator.person_or_org.name }}
+                            <img src="{% static 'images/orcid-vector.svg' %}" alt="ORCID" width="16" height="16" class="app-details-orcid-icon">
+                            <span>{{ creator.person_or_org.name }}</span>
                         </a>
                     {% else %}
                         <span class="value-label fw-normal text-dark card-username"