From 4ef4faad2eb742ece0cec18f528754183f3c85c2 Mon Sep 17 00:00:00 2001
From: Peter Goodhall <peter@magicbug.co.uk>
Date: Tue, 12 Aug 2025 22:34:53 +0100
Subject: [PATCH] Add spinner and disable button during manual sync

Introduced a spinner and button disabling for the manual sync action using htmx events to improve user feedback during the upload process.
---
 application/views/lotw_views/index.php | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/application/views/lotw_views/index.php b/application/views/lotw_views/index.php
index 28f0a5b9..741c666a 100644
--- a/application/views/lotw_views/index.php
+++ b/application/views/lotw_views/index.php
@@ -122,7 +122,11 @@
 		</div>
 
 		<div class="card-body">
-			<button class="btn btn-outline-success" hx-get="<?php echo site_url('lotw/lotw_upload'); ?>"  hx-target="#lotw_manual_results">
+			<button id="manual-sync-btn" class="btn btn-outline-success" 
+				hx-get="<?php echo site_url('lotw/lotw_upload'); ?>"  
+				hx-target="#lotw_manual_results"
+				hx-indicator="#sync-spinner">
+				<span id="sync-spinner" class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" style="display: none;"></span>
 				<?php echo lang('lotw_btn_manual_sync'); ?>
 			</button>
 
@@ -131,3 +135,22 @@
 	</div>
 
 </div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const syncBtn = document.getElementById('manual-sync-btn');
+    const spinner = document.getElementById('sync-spinner');
+    
+    // Show spinner when htmx request starts
+    syncBtn.addEventListener('htmx:beforeRequest', function() {
+        spinner.style.display = 'inline-block';
+        syncBtn.disabled = true;
+    });
+    
+    // Hide spinner when htmx request completes (success or error)
+    syncBtn.addEventListener('htmx:afterRequest', function() {
+        spinner.style.display = 'none';
+        syncBtn.disabled = false;
+    });
+});
+</script>