From c00d28d5199e9a94fe10b681d14b70ddc2cb2cef Mon Sep 17 00:00:00 2001
From: Peter Goodhall <peter@magicbug.co.uk>
Date: Sat, 9 Aug 2025 21:45:27 +0100
Subject: [PATCH] Improve DXCC update UI responsiveness and feedback

Enhanced the DXCC data update interface by adding a spinner, disabling the button during updates, and providing immediate status feedback. Polling intervals were reduced for more responsive updates, and error handling was improved to reset UI elements on persistent errors.
---
 application/views/interface_assets/footer.php | 60 +++++++++++++++----
 application/views/update/index.php            | 14 ++---
 2 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/application/views/interface_assets/footer.php b/application/views/interface_assets/footer.php
index f21b1d66..87044478 100644
--- a/application/views/interface_assets/footer.php
+++ b/application/views/interface_assets/footer.php
@@ -1927,25 +1927,59 @@ if ($this->session->userdata('user_id') != null) {
     <script>
         $(document).ready(function() {
             $('#btn_update_dxcc').bind('click', function() {
-                $('#dxcc_update_status').show();
+                // Show spinner and disable button
+                $('#dxcc_spinner').show();
+                $('#btn_text').text('Updating...');
+                $('#btn_update_dxcc').prop('disabled', true);
+                
+                // Show initial status immediately
+                $('#dxcc_update_status').show().html('Starting update...<br/>');
+                
                 $.ajax({
                     url: "update/dxcc"
                 });
-                setTimeout(update_stats, 5000);
+                
+                // Start polling immediately, then every 2 seconds for more responsive updates
+                setTimeout(update_stats, 1000);
             });
 
             function update_stats() {
-                $('#dxcc_update_status').load('<?php echo base_url() ?>index.php/update/get_status', function(val) {
-                    $('#dxcc_update_status').html(val);
-
-                    if ((val === null) || (val === undefined) || (typeof val !== 'string') || (val.substring(0, 4) !== "DONE")) {
-                        setTimeout(update_stats, 5000);
-                    }
-                }).fail(function(xhr, status, error) {
-                    console.log('Error loading status: ' + status + ' - ' + error);
-                    $('#dxcc_update_status').html('Error loading status...');
-                    setTimeout(update_stats, 10000); // Retry in 10 seconds on error
-                });
+                console.log('Polling status at: ' + new Date().toLocaleTimeString());
+                
+                $.get('<?php echo base_url() ?>index.php/update/get_status')
+                    .done(function(response) {
+                        console.log('Status response:', response);
+                        
+                        // Always update the status display with the response
+                        if (response && response.trim() !== '') {
+                            $('#dxcc_update_status').html(response);
+                        }
+                        
+                        // Check if update is complete
+                        if (response && typeof response === 'string' && response.substring(0, 4) === "DONE") {
+                            console.log('Update completed!');
+                            // Update is done - hide spinner and re-enable button
+                            $('#dxcc_spinner').hide();
+                            $('#btn_text').text('Update DXCC Data');
+                            $('#btn_update_dxcc').prop('disabled', false);
+                        } else {
+                            // Continue polling if not done - reduced interval for better responsiveness
+                            setTimeout(update_stats, 2000);
+                        }
+                    })
+                    .fail(function(xhr, status, error) {
+                        console.log('Error loading status: ' + status + ' - ' + error);
+                        $('#dxcc_update_status').html('Error loading status... Retrying...<br/>');
+                        
+                        // Reset button state on persistent error
+                        if (xhr.status === 0 || xhr.status >= 500) {
+                            $('#dxcc_spinner').hide();
+                            $('#btn_text').text('Update DXCC Data');
+                            $('#btn_update_dxcc').prop('disabled', false);
+                        }
+                        
+                        setTimeout(update_stats, 5000); // Retry in 5 seconds on error
+                    });
 
             }
 
diff --git a/application/views/update/index.php b/application/views/update/index.php
index cf05c2ab..4f29910b 100644
--- a/application/views/update/index.php
+++ b/application/views/update/index.php
@@ -25,9 +25,14 @@
 						</div>
 					<?php } else { ?>
 						<h5>Check for DXCC Data Updates</h5>
-						<input type="submit" class="btn btn-primary" id="btn_update_dxcc" value="Update DXCC Data" />
+						<button type="button" class="btn btn-primary" id="btn_update_dxcc">
+							<span class="spinner-border spinner-border-sm me-2" id="dxcc_spinner" role="status" aria-hidden="true" style="display: none;"></span>
+							<span id="btn_text">Update DXCC Data</span>
+						</button>
 
-						<div id="dxcc_update_status">Status:</br></div>
+						<div id="dxcc_update_status" class="mt-3 p-2 border rounded bg-light" style="min-height: 60px;">
+							<strong>Status:</strong> Ready to update
+						</div>
 
 						<br />
 						<br />
@@ -45,11 +50,6 @@
 							This function can be used to update QSO continent information for all QSOs in Cloudlog missing that information.
 						</p>
 						<p><a class="btn btn-primary" href="<?php echo site_url('update/check_missing_continent'); ?>">Check QSOs missing continent data</a></p>
-						<style>
-							#dxcc_update_status {
-								display: None;
-							}
-						</style>
 					<?php } ?>
 				</div>
 				<div class="tab-pane fade" id="distance" role="tabpanel" aria-labelledby="distance-tab">