From 8487875b2fafb337dbd8047a5145d5f2f1d0de53 Mon Sep 17 00:00:00 2001
From: phl0 <github@florian-wolters.de>
Date: Thu, 6 Mar 2025 13:23:41 +0100
Subject: [PATCH] Add a progress indicator to LoTW manual sync and clear
 results upon (re-)click

---
 application/views/lotw_views/index.php |  5 +++--
 assets/css/general.css                 | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/application/views/lotw_views/index.php b/application/views/lotw_views/index.php
index 994514be1..a268fae36 100644
--- a/application/views/lotw_views/index.php
+++ b/application/views/lotw_views/index.php
@@ -139,9 +139,10 @@
 
 		<div class="card-body">
             		<?php if (($next_run ?? '') != '') { echo "<p>".__("The next automatic sync with LoTW will happen at: ").$next_run."</p>"; } ?>
-			<button class="btn btn-outline-success" hx-get="<?php echo site_url('lotw/lotw_upload'); ?>"  hx-target="#lotw_manual_results">
-				<?= __("Manual Sync"); ?>
+			<button class="btn btn-outline-success" hx-on:click="document.getElementById('lotw_manual_results').innerHTML = '';" hx-get="<?php echo site_url('lotw/lotw_upload'); ?>" hx-indicator="#lotw-sync-running" hx-target="#lotw_manual_results">
+            <?= __("Manual Sync"); ?>
 			</button>
+			<span style="margin-left: 10px;" id="lotw-sync-running" class="htmx-indicator"> <?php echo __("running..."); ?></span>
 
 			<div id="lotw_manual_results"></div>
 		</div>
diff --git a/assets/css/general.css b/assets/css/general.css
index 364faee4e..589c15720 100644
--- a/assets/css/general.css
+++ b/assets/css/general.css
@@ -1206,4 +1206,19 @@ svg text.month { fill: #AAA; }
 	display: flex;
     align-items: center; /* Vertically aligns the flag and callsign */
     gap: 0.5em; /* Adds space between the flag and callsign */
-}
\ No newline at end of file
+}
+
+.htmx-indicator {
+   opacity: 0;
+   animation: blinker 2s linear infinite;
+}
+
+.htmx-request.htmx-indicator {
+   opacity: 1;
+}
+
+@keyframes blinker {
+   50% {
+      opacity: 0;
+   }
+}