From 4c76d39313e79693687c64e5eaf99694048d4ce7 Mon Sep 17 00:00:00 2001
From: Neda Moeini <neda.moeini@geant.org>
Date: Thu, 27 Mar 2025 15:18:56 +0100
Subject: [PATCH] Add loading spinner and disable button during file upload
---
.../file_validator/templates/upload.html | 21 ++++++++++++++++++-
1 file changed, 20 insertions(+), 1 deletion(-)
diff --git a/sage_validation/file_validator/templates/upload.html b/sage_validation/file_validator/templates/upload.html
index e124398..6ea1807 100644
--- a/sage_validation/file_validator/templates/upload.html
+++ b/sage_validation/file_validator/templates/upload.html
@@ -13,10 +13,21 @@
class="w-full border border-gray-300 p-3 rounded-lg focus:outline-none focus:ring focus:ring-blue-400">
</div>
- <button type="submit"
+ <button id="submitBtn" type="submit"
class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-400">
Upload
</button>
+
+ <!-- Loading Spinner -->
+ <div id="loadingSpinner" class="hidden flex justify-center">
+ <svg class="animate-spin h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none"
+ viewBox="0 0 24 24">
+ <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+ stroke-width="4"></circle>
+ <path class="opacity-75" fill="currentColor"
+ d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
+ </svg>
+ </div>
</form>
<!-- Error Display -->
@@ -45,6 +56,8 @@
e.preventDefault();
const fileInput = document.getElementById('fileInput');
+ const submitBtn = document.getElementById('submitBtn');
+ const loadingSpinner = document.getElementById('loadingSpinner');
const errorSection = document.getElementById('errorSection');
const errorList = document.getElementById('errorList');
const successSection = document.getElementById('successSection');
@@ -58,6 +71,9 @@
successSection.classList.add('hidden');
downloadSection.classList.add('hidden');
+ submitBtn.disabled = true;
+ loadingSpinner.classList.remove('hidden');
+
const formData = new FormData();
formData.append('file', fileInput.files[0]);
@@ -105,6 +121,9 @@
li.textContent = 'Failed to connect to the server. Please check your internet connection.';
errorList.appendChild(li);
errorSection.classList.remove('hidden');
+ } finally {
+ loadingSpinner.classList.add('hidden');
+ submitBtn.disabled = false;
}
});
</script>
--
GitLab