From 7d7bbbe714a58895e6c8cb46be0da745fa5ab7c3 Mon Sep 17 00:00:00 2001
From: Julian Ophals <jophals@asu.edu>
Date: Wed, 26 Mar 2025 11:26:54 -0700
Subject: [PATCH 1/3] [story/CITE-231] added loading animation upon upload
 success

---
 .../webapp/WEB-INF/views/auth/group/item.html | 32 ++++++++++++++++---
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html b/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
index e55bf9880..fbf0e235b 100644
--- a/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
+++ b/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
@@ -110,7 +110,10 @@
 	            data: formData, 
 	            success: function(data) {
 	                document.getElementById('uploadFileInput').value = '';
-	                $("#uploadFileModal").modal('hide');
+	        		showSuccessLoader();
+	                setTimeout(function(){
+		            	$("#uploadFileModal").modal('hide');
+		            }, 2000);
 	            }
 	        });
   
@@ -284,6 +287,27 @@
 	    	});
 	}
 	
+	function showSuccessLoader() {
+	    const loader = document.createElement('div');
+	    loader.classList.add('loader');
+	    
+	    loader.style.border = '6px solid #f3f3f3';
+	    loader.style.borderTop = '6px solid #3498db';
+	    loader.style.borderRadius = '50%';
+	    loader.style.width = '30px';
+	    loader.style.height = '30px';
+	    loader.style.animation = 'spin 2s linear infinite';
+	    loader.style.display = 'inline-block';
+
+	    const message = document.createElement('p');
+	    message.textContent = 'upload started...';
+	    message.style.display = 'inline-block';
+
+		const uploadFileBody = document.getElementById('uploadFileBody');
+		uploadFileBody.append(loader);
+		uploadFileBody.append(message);
+    }
+	
 </script>
 </head>
 
@@ -640,9 +664,9 @@ <h4 class="modal-title">Parse Reference</h4>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
             <h4 class="modal-title">Upload File</h4>
           </div>
-          <div class="modal-body">
-            <label>Choose file to upload</label>
-            <input type="file" id="uploadFileInput">
+          <div class="modal-body" id="uploadFileBody">
+            <label style="display: block;">Choose file to upload</label>
+            <input type="file" id="uploadFileInput" style="display: inline-block;">
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

From 573d9c32eea99a16e2362f0e10bd1def221be468 Mon Sep 17 00:00:00 2001
From: Julian Ophals <jophals@asu.edu>
Date: Wed, 26 Mar 2025 11:57:09 -0700
Subject: [PATCH 2/3] [story/CITE-231] added page reload upon successful start
 of file upload

---
 citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html b/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
index fbf0e235b..1a0487330 100644
--- a/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
+++ b/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
@@ -113,6 +113,7 @@
 	        		showSuccessLoader();
 	                setTimeout(function(){
 		            	$("#uploadFileModal").modal('hide');
+		            	location.reload();
 		            }, 2000);
 	            }
 	        });

From ead9c4b494566d00b69e1dc9b73c5522846c21fc Mon Sep 17 00:00:00 2001
From: Julian Ophals <jophals@asu.edu>
Date: Wed, 28 May 2025 15:50:59 -0700
Subject: [PATCH 3/3] [story/CITE-231] adjusted loader so that it displays
 immediately after clicking upload button; also improved the layout and
 spacing

---
 .../webapp/WEB-INF/views/auth/group/item.html  | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html b/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
index 1a0487330..f81061544 100644
--- a/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
+++ b/citesphere/src/main/webapp/WEB-INF/views/auth/group/item.html
@@ -99,6 +99,7 @@
 	        for (var i = 0; i < uploadFiles.length; i++) {
 	            formData.append("files", uploadFiles[i]);
 	        }
+	        showLoader();
 	        
 	        $.ajax({
 	            type: "POST",
@@ -110,7 +111,6 @@
 	            data: formData, 
 	            success: function(data) {
 	                document.getElementById('uploadFileInput').value = '';
-	        		showSuccessLoader();
 	                setTimeout(function(){
 		            	$("#uploadFileModal").modal('hide');
 		            	location.reload();
@@ -288,10 +288,9 @@
 	    	});
 	}
 	
-	function showSuccessLoader() {
+	function showLoader() {
 	    const loader = document.createElement('div');
 	    loader.classList.add('loader');
-	    
 	    loader.style.border = '6px solid #f3f3f3';
 	    loader.style.borderTop = '6px solid #3498db';
 	    loader.style.borderRadius = '50%';
@@ -299,14 +298,19 @@
 	    loader.style.height = '30px';
 	    loader.style.animation = 'spin 2s linear infinite';
 	    loader.style.display = 'inline-block';
+	    loader.style.float = 'left';
 
 	    const message = document.createElement('p');
+	    message.classList.add('message');
 	    message.textContent = 'upload started...';
 	    message.style.display = 'inline-block';
+	    message.style.margin = '10px 0px 10px 0px';
+	    message.style.paddingLeft = '15px';
+	    message.style.float = 'left';
 
-		const uploadFileBody = document.getElementById('uploadFileBody');
-		uploadFileBody.append(loader);
-		uploadFileBody.append(message);
+		const uploadFileFooter = document.getElementById('uploadFileFooter');
+		uploadFileFooter.prepend(message);
+		uploadFileFooter.prepend(loader);
     }
 	
 </script>
@@ -669,7 +673,7 @@ <h4 class="modal-title">Upload File</h4>
             <label style="display: block;">Choose file to upload</label>
             <input type="file" id="uploadFileInput" style="display: inline-block;">
           </div>
-          <div class="modal-footer">
+          <div class="modal-footer" id="uploadFileFooter">
             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
             <button id="uploadFileBtn" type="button" class="btn btn-primary">Upload</button>
           </div>