feat: Improve submission status UX during validation

ietf/static/js/draft-submit.js

@@ -66,28 +66,31 @@ $(function () {
 
         });
 
-    // Reload page periodically if the enableAutoReload checkbox is present and checked
-    const autoReloadSwitch = document.getElementById("enableAutoReload");
-    const timeSinceDisplay = document.getElementById("time-since-uploaded");
-    if (autoReloadSwitch) {
-        const autoReloadTime = 30000; // ms
-        let autoReloadTimeoutId;
-        autoReloadSwitch.parentElement.classList.remove("d-none");
-        timeSinceDisplay.classList.remove("d-none");
-        autoReloadTimeoutId = setTimeout(() => location.reload(), autoReloadTime);
-        autoReloadSwitch.addEventListener("change", (e) => {
-            if (e.currentTarget.checked) {
-                if (!autoReloadTimeoutId) {
-                    autoReloadTimeoutId = setTimeout(() => location.reload(), autoReloadTime);
-                    timeSinceDisplay.classList.remove("d-none");
-                }
-            } else {
-                if (autoReloadTimeoutId) {
-                    clearTimeout(autoReloadTimeoutId);
-                    autoReloadTimeoutId = null;
-                    timeSinceDisplay.classList.add("d-none");
-                }
+    // If draft is validating, poll until validation is complete, then reload the page
+    const submissionValidatingAlert = document.getElementById('submission-validating-alert');
+    if (submissionValidatingAlert) {
+        let statusPollTimer;
+        const statusUrl = submissionValidatingAlert.dataset['submissionStatusUrl'];
+        let statusPollInterval = 2000; // ms
+        const maxPollInterval = 32000; // ms
+
+        function checkStatus() {
+            if (statusPollInterval < maxPollInterval) {
+                statusPollInterval *= 2;
             }
-        });
+            const xhr = new XMLHttpRequest();
+            xhr.open("GET", statusUrl, true);
+            xhr.onload = (e) => {
+                if (xhr.response && xhr.response.state !== 'validating') {
+                    location.reload();
+                } else {
+                    statusPollTimer = setTimeout(checkStatus, statusPollInterval);
+                }
+            };
+            xhr.onerror = (e) => {statusPollTimer = setTimeout(checkStatus, statusPollInterval);};
+            xhr.responseType = 'json';
+            xhr.send('');
+        }
+        statusPollTimer = setTimeout(checkStatus, statusPollInterval);
     }
 });

ietf/templates/submit/submission_status.html

@@ -137,25 +137,20 @@ <h2 class="mt-5">Submission checks</h2>
             Notice: The Internet-Draft submission process has changed as of Datatracker version 10.3.0.
             Your Internet-Draft is currently being processed and validated asynchronously. Results will be
             displayed at this URL when they are available. If JavaScript is enabled in your
-            browser, this page will refreshed automatically. If JavaScript is not enabled, or if you
-            disable the automatic refresh with the toggle below, please reload this page in a few
-            minutes to see the results.
+            browser, this page will refreshed automatically. If JavaScript is not enabled, 
+            please reload this page in a few minutes to see the results.
         </div>
-        <div class="alert alert-warning my-3">
-            This submission is being processed and validated. This normally takes a few minutes after
-            submission.
+        <div id="submission-validating-alert"
+             class="alert alert-warning my-3"
+             data-submission-status-url="{% url 'ietf.submit.views.api_submission_status' submission_id=submission.pk %}">
+            This submission is being processed and validated. This usually takes a few seconds but may
+            take a few minutes for complex drafts or during periods of heavy load.
             {% with earliest_event=submission.submissionevent_set.last %}
             {% if earliest_event %}
-            Your draft was uploaded at {{ earliest_event.time }}<span id="time-since-uploaded" class="d-none">
-            ({{ earliest_event.time|timesince }} ago)</span>.
+            Your draft was uploaded at {{ earliest_event.time }}.
             {% endif %}
             {% endwith %}
             Please contact the secretariat for assistance if it has been more than an hour.
-
-            <div class="form-check form-switch mt-3 d-none">{# hide with d-none unless javascript makes it visible #}
-                <input class="form-check-input" type="checkbox" id="enableAutoReload" checked>
-                <label class="form-check-label" for="enableAutoReload"> Refresh automatically </label>
-            </div>
         </div>
         {% else %}
         <h2 class="mt-5">Meta-data from the submission</h2>