From 968ea69e7df3a166df590e148faa9f9c9eb832d0 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 7 Aug 2026 18:05:51 +0200
Subject: [PATCH] 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.
---
 .../livewire/project/service/edit-compose.blade.php      | 2 +-
 .../views/livewire/project/service/stack-form.blade.php  | 9 +++++++--
 tests/Feature/ComposeEditorLayoutTest.php                | 5 +++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/resources/views/livewire/project/service/edit-compose.blade.php b/resources/views/livewire/project/service/edit-compose.blade.php
index 3acbfcc2a..78400cb76 100644
--- a/resources/views/livewire/project/service/edit-compose.blade.php
+++ b/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">
diff --git a/resources/views/livewire/project/service/stack-form.blade.php b/resources/views/livewire/project/service/stack-form.blade.php
index 65eb0e3fb..89dfa0e5c 100644
--- a/resources/views/livewire/project/service/stack-form.blade.php
+++ b/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>
diff --git a/tests/Feature/ComposeEditorLayoutTest.php b/tests/Feature/ComposeEditorLayoutTest.php
index 953bcc0e0..d8538e82d 100644
--- a/tests/Feature/ComposeEditorLayoutTest.php
+++ b/tests/Feature/ComposeEditorLayoutTest.php
@@ -13,6 +13,10 @@ it('uses the large modal treatment for the compose editor', function () {
         ->toContain("\$dispatch('compose-preview-toggle')")
         ->toContain("\$dispatch('compose-save')")
         ->toContain('@compose-save-finished.window="saving = false"')
+        ->toContain('@compose-validate-finished.window="validating = false"')
+        ->toContain('@click="validating = true; $dispatch(\'compose-validate\')"')
+        ->toContain('x-bind:disabled="validating"')
+        ->toContain('<x-loading-on-button x-show="validating" x-cloak />')
         ->toContain('<x-loading-on-button x-show="saving" x-cloak />')
         ->toContain('x-bind:disabled="saving"')
         ->not->toContain('name="refresh"')
@@ -36,6 +40,7 @@ it('renders the compose editor with clear guidance settings and actions', functi
         ->toContain('min-h-[24rem]')
         ->toContain('@compose-preview-toggle.window')
         ->toContain('@compose-save.window')
+        ->toContain('@compose-validate.window="$wire.validateCompose().finally(() => $dispatch(\'compose-validate-finished\'))"')
         ->not->toContain("finally(() => \$dispatch('compose-save-finished'))")
         ->not->toContain('sticky bottom-0')
         ->not->toContain('Cancel')