projects/abiball
projects/abiball
0
0
Fork 0
Code Pull Requests 1 Actions Packages Activity

add spinner to submit

Browse Source
This commit is contained in:
Constantin Simonis 2025-01-30 12:26:26 +01:00
parent 9f740391f6
commit e1a5995a0c
Signed by: csimonis
GPG Key ID: 758DD9C506603183
3 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/controllers/form_controller.js
View File

@ -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);

1
assets/icons/loader.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 418 B

5
templates/ticket/index.html.twig
View File

@ -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>