From ed1af0673a0181ce988d90aefeec99d6fbcebc6c Mon Sep 17 00:00:00 2001
From: Don Sullivan <apologeticdon@gmail.com>
Date: Tue, 21 Apr 2026 12:58:50 -0700
Subject: [PATCH] fix ajax-form loading state not restoring after AJAX
 completes

- Show spinner + disable submit button on form submit
- Restore original button HTML and re-enable on AJAX complete
- Re-enable immediately when user modifies text input, so clearing
  and retyping a search works without the button staying stuck

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 dist/js/core-styles/ajax-form.js | 26 +++++++++++++++++++++++++-
 js/core-styles/ajax-form.js      | 26 +++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/dist/js/core-styles/ajax-form.js b/dist/js/core-styles/ajax-form.js
index 62c5066..fb5be1d 100644
--- a/dist/js/core-styles/ajax-form.js
+++ b/dist/js/core-styles/ajax-form.js
@@ -62,6 +62,20 @@ $(function() {
     let url = $this.attr('action');
     let data = $this.serializeArray();
     let $target = $this;
+    let $submitBtn = $this.find('[type="submit"]');
+
+    if (!$submitBtn.data('ajax-form-original-html')) {
+      $submitBtn.data('ajax-form-original-html', $submitBtn.html());
+    }
+    let originalHtml = $submitBtn.data('ajax-form-original-html');
+
+    $submitBtn.html('<i class="fa-solid fa-spinner fa-spin"></i><span class="d-none d-sm-inline ms-1"> Loading</span>');
+    $submitBtn.prop('disabled', true);
+
+    function restoreBtn() {
+      $submitBtn.html(originalHtml);
+      $submitBtn.prop('disabled', false);
+    }
 
     if( $this.is('[data-target]') ){
       $target = $($this.data('target'));
@@ -76,11 +90,21 @@ $(function() {
     if( $this.is('[data-power-bar]') ){
       $target.load(url,data,function(){
         loadShoppingListPowerBar();
+        restoreBtn();
       });
     } else {
-      $target.load(url,data);
+      $target.load(url,data,restoreBtn);
     }
 
   });
 
+  // Re-enable the submit button when the user modifies the text input after a search
+  $(document).on('input', '[data-ajax-form] [type="text"]', function() {
+    let $submitBtn = $(this).closest('[data-ajax-form]').find('[type="submit"]');
+    if ($submitBtn.prop('disabled') && $submitBtn.data('ajax-form-original-html')) {
+      $submitBtn.html($submitBtn.data('ajax-form-original-html'));
+      $submitBtn.prop('disabled', false);
+    }
+  });
+
 });
diff --git a/js/core-styles/ajax-form.js b/js/core-styles/ajax-form.js
index 62c5066..fb5be1d 100644
--- a/js/core-styles/ajax-form.js
+++ b/js/core-styles/ajax-form.js
@@ -62,6 +62,20 @@ $(function() {
     let url = $this.attr('action');
     let data = $this.serializeArray();
     let $target = $this;
+    let $submitBtn = $this.find('[type="submit"]');
+
+    if (!$submitBtn.data('ajax-form-original-html')) {
+      $submitBtn.data('ajax-form-original-html', $submitBtn.html());
+    }
+    let originalHtml = $submitBtn.data('ajax-form-original-html');
+
+    $submitBtn.html('<i class="fa-solid fa-spinner fa-spin"></i><span class="d-none d-sm-inline ms-1"> Loading</span>');
+    $submitBtn.prop('disabled', true);
+
+    function restoreBtn() {
+      $submitBtn.html(originalHtml);
+      $submitBtn.prop('disabled', false);
+    }
 
     if( $this.is('[data-target]') ){
       $target = $($this.data('target'));
@@ -76,11 +90,21 @@ $(function() {
     if( $this.is('[data-power-bar]') ){
       $target.load(url,data,function(){
         loadShoppingListPowerBar();
+        restoreBtn();
       });
     } else {
-      $target.load(url,data);
+      $target.load(url,data,restoreBtn);
     }
 
   });
 
+  // Re-enable the submit button when the user modifies the text input after a search
+  $(document).on('input', '[data-ajax-form] [type="text"]', function() {
+    let $submitBtn = $(this).closest('[data-ajax-form]').find('[type="submit"]');
+    if ($submitBtn.prop('disabled') && $submitBtn.data('ajax-form-original-html')) {
+      $submitBtn.html($submitBtn.data('ajax-form-original-html'));
+      $submitBtn.prop('disabled', false);
+    }
+  });
+
 });