stop spinner on fail + prettier

assets/controllers.json

@@ -1,15 +1,15 @@
 {
-    "controllers": {
-        "@symfony/ux-turbo": {
-            "turbo-core": {
-                "enabled": true,
-                "fetch": "eager"
-            },
-            "mercure-turbo-stream": {
-                "enabled": false,
-                "fetch": "eager"
-            }
-        }
-    },
-    "entrypoints": []
+  "controllers": {
+    "@symfony/ux-turbo": {
+      "turbo-core": {
+        "enabled": true,
+        "fetch": "eager"
+      },
+      "mercure-turbo-stream": {
+        "enabled": false,
+        "fetch": "eager"
+      }
+    }
+  },
+  "entrypoints": []
 }

assets/controllers/form_controller.js

@@ -1,8 +1,8 @@
 import { Controller } from "@hotwired/stimulus";
-import {loadStripe} from "@stripe/stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
 
 export default class extends Controller {
-  static targets = ['key', 'submit', 'firstname', 'lastname', 'email', 'phone'];
+  static targets = ["key", "submit", "firstname", "lastname", "email", "phone"];
 
   stripe;
 
@@ -36,17 +36,17 @@ export default class extends Controller {
   submit(event) {
     event.preventDefault();
 
-    this.submitTarget.querySelector('span').remove();
-    this.submitTarget.querySelector('svg').classList.remove('hidden');
+    this.submitTarget.querySelector("span").classList.add("hidden");
+    this.submitTarget.querySelector("svg").classList.remove("hidden");
 
     const forms = document.querySelectorAll("form");
     const personalData = this.getPersonalData();
     const ticketData = this.getTicketData(forms);
 
     const formData = {
-        personal: personalData,
-        tickets: ticketData,
-    }
+      personal: personalData,
+      tickets: ticketData,
+    };
 
     fetch("/ticket/submit", {
       method: "POST",
@@ -56,6 +56,8 @@ export default class extends Controller {
       },
     }).then((response) => {
       if (!response.ok) {
+        this.submitTarget.querySelector("svg").classList.add("hidden");
+        this.submitTarget.querySelector("span").classList.remove("hidden");
         alert("An error occurred");
       } else {
         response.json().then((data) => {
@@ -90,6 +92,6 @@ export default class extends Controller {
       ticket: parseInt(form.querySelector('select[name="ticket"]').value),
       food: parseInt(form.querySelector('select[name="food"]').value),
       note: form.querySelector('input[name="note"]').value,
-    }
+    };
   }
 }

assets/styles/app.css

@@ -3,5 +3,5 @@
 @tailwind utilities;
 
 .text-input {
-    @apply border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 outline-orange-500 focus:border-orange-500 transition-colors;
-}
+  @apply border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 outline-orange-500 focus:border-orange-500 transition-colors;
+}