fix(ui): show loading state on compose validate button

Disable the Validate control and show a spinner until validateCompose
finishes, then clear state via compose-validate-finished.

resources/views/livewire/project/service/edit-compose.blade.php

@@ -1,6 +1,6 @@
 <div x-data="{ raw: true, showNormalTextarea: false }"
     @compose-preview-toggle.window="raw = !raw"
-    @compose-validate.window="$wire.validateCompose()"
+    @compose-validate.window="$wire.validateCompose().finally(() => $dispatch('compose-validate-finished'))"
     @compose-save.window="$wire.saveEditedCompose()"
     class="flex min-h-0 flex-col gap-3">
     <x-callout type="info" title="Volume names">

resources/views/livewire/project/service/stack-form.blade.php

@@ -12,7 +12,8 @@
                     <x-modal-input buttonTitle="Edit Compose file" title="Docker Compose" :closeOutside="false"
                         :isLarge="true">
                         <x-slot:headerActions>
-                            <div x-data="{ preview: false, saving: false }"
+                            <div x-data="{ preview: false, validating: false, saving: false }"
+                                @compose-validate-finished.window="validating = false"
                                 @compose-save-finished.window="saving = false" class="flex items-center gap-2">
                                 <x-forms.button
                                     @click="preview = !preview; $dispatch('compose-preview-toggle')">
@@ -20,7 +21,11 @@
                                     <span x-text="preview ? 'Back to source Compose' : 'Preview generated Compose'"></span>
                                 </x-forms.button>
                                 @if (blank($service->service_type))
-                                    <x-forms.button @click="$dispatch('compose-validate')">Validate</x-forms.button>
+                                    <x-forms.button @click="validating = true; $dispatch('compose-validate')"
+                                        x-bind:disabled="validating">
+                                        <x-loading-on-button x-show="validating" x-cloak />
+                                        Validate
+                                    </x-forms.button>
                                 @endif
                                 <x-forms.button @click="saving = true; $dispatch('compose-save')"
                                     x-bind:disabled="saving" isHighlighted>