From e1a5995a0ce6d16c553918627ad5ed75ce3e56d0 Mon Sep 17 00:00:00 2001
From: Constantin Simonis <constantin@simonis.lol>
Date: Thu, 30 Jan 2025 12:26:26 +0100
Subject: [PATCH] add spinner to submit

---
 assets/controllers/form_controller.js | 5 ++++-
 assets/icons/loader.svg               | 1 +
 templates/ticket/index.html.twig      | 5 ++++-
 3 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 assets/icons/loader.svg

diff --git a/assets/controllers/form_controller.js b/assets/controllers/form_controller.js
index eeab22e..5397de6 100644
--- a/assets/controllers/form_controller.js
+++ b/assets/controllers/form_controller.js
@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus";
 import {loadStripe} from "@stripe/stripe-js";
 
 export default class extends Controller {
-  static targets = ['key'];
+  static targets = ['key', 'submit'];
 
   stripe;
 
@@ -36,6 +36,9 @@ export default class extends Controller {
   submit(event) {
     event.preventDefault();
 
+    this.submitTarget.querySelector('span').remove();
+    this.submitTarget.querySelector('svg').classList.remove('hidden');
+
     const forms = document.querySelectorAll("form");
     const formData = this.getFormData(forms);
 
diff --git a/assets/icons/loader.svg b/assets/icons/loader.svg
new file mode 100644
index 0000000..6655b55
--- /dev/null
+++ b/assets/icons/loader.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z" opacity=".5"/><path fill="currentColor" d="M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z"><animateTransform attributeName="transform" dur="1s" from="0 12 12" repeatCount="indefinite" to="360 12 12" type="rotate"/></path></svg>
\ No newline at end of file
diff --git a/templates/ticket/index.html.twig b/templates/ticket/index.html.twig
index e6dbf2a..2e0ad19 100644
--- a/templates/ticket/index.html.twig
+++ b/templates/ticket/index.html.twig
@@ -34,7 +34,10 @@
                         </div>
                         <div class="flex inline-flex w-full">
                             <button class="ml-0" data-action="form#addEntry" type="button"><twig:ux:icon name="plus" height="32px" width="32px"/></button>
-                            <button type="submit" data-action="form#submit" class="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-2.5 rounded-full text-xs sm:text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300 ml-auto">Submit</button>
+                            <button type="submit" data-action="form#submit" data-form-target="submit" class="bg-gradient-to-r from-red-500 to-orange-500 hover:from-red-600 hover:to-orange-600 text-white px-4 sm:px-6 md:px-8 py-2 sm:py-2.5 rounded-full text-xs sm:text-sm font-medium shadow-md hover:shadow-lg transition-all duration-300 ml-auto">
+                                <span>Submit</span>
+                                <twig:ux:icon name="loader" class="hidden" height="21px" width="21px" />
+                            </button>
                         </div>
                     </div>
                 </div>