Merge pull request #3620 from GSA-TTS/main

backend/audit/templates/audit/upload-report.html

@@ -90,6 +90,11 @@ <h4 class="usa-process-list__heading">{% if already_submitted %}Re-upload{% else
                         A file has already been uploaded for this section. A successful reupload will overwrite your previous submission.
                     </p>
                 {% endif %}
+
+                <div hidden id="loader" class="cross-validation-loader margin-top-6">
+                    <img src="{% static 'img/loader.svg' %}" alt="spinner for processing upload" />
+                </div>
+
                 <button class="usa-button margin-bottom-8 margin-top-5" id="continue">{% if already_submitted %}Re-upload{% else %}Upload{% endif %} Single Audit Package</button>
                 <a class="usa-button usa-button--unstyled margin-left-2" href="{% url 'audit:SubmissionProgress' report_id %}"
                     aria-controls="upload-cancel">Cancel</a>
@@ -98,4 +103,5 @@ <h4 class="usa-process-list__heading">{% if already_submitted %}Re-upload{% else
         </div>
     </div>
     {% include "audit-metadata.html" %}
+    <script src="{% static 'compiled/js/upload-report.js' %}"></script>
 {% endblock content %}

backend/static/js/upload-report.js

@@ -0,0 +1,24 @@
+var FORM = document.getElementById('upload-report__form');
+
+const continue_button = document.getElementById(`continue`); // <button>
+const loader = document.getElementById(`loader`); // <div>
+
+// On form submission, display the loader and disable the submit button
+function attachUploadHandler() {
+  FORM.addEventListener('submit', () => {
+    loader.hidden = false;
+    continue_button.innerText = 'Validating...';
+    continue_button.disabled = true;
+  });
+}
+
+// On pageload, attach handlers to monitor the page state
+function attachEventHandlers() {
+  attachUploadHandler();
+}
+
+function init() {
+  attachEventHandlers();
+}
+
+init();