From 00846cb662fa4832dcdfe0dfe668456e951f2f97 Mon Sep 17 00:00:00 2001
From: Phil Dominguez <142051477+phildominguez-gsa@users.noreply.github.com>
Date: Mon, 8 Apr 2024 13:07:17 -0400
Subject: [PATCH] Adding pdf upload spinner and disabling button (#3617)

---
 .../audit/templates/audit/upload-report.html  |  6 +++++
 backend/static/js/upload-report-pdf.js        | 21 ----------------
 backend/static/js/upload-report.js            | 24 +++++++++++++++++++
 3 files changed, 30 insertions(+), 21 deletions(-)
 delete mode 100644 backend/static/js/upload-report-pdf.js
 create mode 100644 backend/static/js/upload-report.js

diff --git a/backend/audit/templates/audit/upload-report.html b/backend/audit/templates/audit/upload-report.html
index 0fa69d6bf9..2dbea8af34 100644
--- a/backend/audit/templates/audit/upload-report.html
+++ b/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 %}
diff --git a/backend/static/js/upload-report-pdf.js b/backend/static/js/upload-report-pdf.js
deleted file mode 100644
index a38156cb65..0000000000
--- a/backend/static/js/upload-report-pdf.js
+++ /dev/null
@@ -1,21 +0,0 @@
-function init() {
-  /*
-    Grab form elements by [required] tag, and use them to enable/disable the submit button.
-  */
-  let d = document,
-    [inputs, knapp] = [
-      d.querySelectorAll('[required]'),
-      d.querySelector('#continue'),
-    ];
-  knapp.disabled = true;
-
-  for (var i = 0; i < inputs.length; i++) {
-    inputs[i].addEventListener('input', () => {
-      let values = [];
-      inputs.forEach((v) => values.push(v.value));
-      knapp.disabled = values.includes('');
-    });
-  }
-}
-
-init();
diff --git a/backend/static/js/upload-report.js b/backend/static/js/upload-report.js
new file mode 100644
index 0000000000..1575485075
--- /dev/null
+++ b/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();