From 50243278fd6f3f4b526f50e77118fea2fbae2b11 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 23 Oct 2026 19:31:57 +0200
Subject: [PATCH] fix(ui): show traffic analytics loading state on the button

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../views/components/modal-confirmation.blade.php  | 14 ++++++++------
 .../server/traffic-analytics-settings.blade.php    |  4 ----
 .../ToggleTrafficAnalyticsTest.php                 |  2 +-
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/resources/views/components/modal-confirmation.blade.php b/resources/views/components/modal-confirmation.blade.php
index 4bda77b555..b59d4c39f1 100644
--- a/resources/views/components/modal-confirmation.blade.php
+++ b/resources/views/components/modal-confirmation.blade.php
@@ -44,6 +44,8 @@
     $effectiveStep2ButtonText = ($skipPasswordConfirmation && $step2ButtonText === 'Continue') ? 'Confirm' : $step2ButtonText;
     // Prefer a rich HTML button title when callers pass <x-slot:button-title> (ComponentSlot).
     $resolvedButtonTitle = $buttonTitle instanceof ComponentSlot ? $buttonTitle : $buttonTitle;
+    // Show a loading state on the trigger button while the submit action runs (needs Livewire updates, so not with wire:ignore).
+    $triggerWireTarget = $ignoreWire || $dispatchAction ? '' : $submitAction;
 @endphp
 
 <div {{ $ignoreWire ? 'wire:ignore' : '' }} x-data="{
@@ -179,31 +181,31 @@
                 @endif
             @elseif ($isErrorButton)
                 @if ($buttonFullWidth)
-                    <x-forms.button class="w-full" isError @click="modalOpen=true">
+                    <x-forms.button class="w-full" isError @click="modalOpen=true" wire:target="{{ $triggerWireTarget }}">
                         {{ $resolvedButtonTitle }}
                     </x-forms.button>
                 @else
-                    <x-forms.button isError @click="modalOpen=true">
+                    <x-forms.button isError @click="modalOpen=true" wire:target="{{ $triggerWireTarget }}">
                         {{ $resolvedButtonTitle }}
                     </x-forms.button>
                 @endif
             @elseif($isHighlightedButton)
                 @if ($buttonFullWidth)
-                    <x-forms.button @click="modalOpen=true" class="flex gap-2 w-full" isHighlighted wire:target>
+                    <x-forms.button @click="modalOpen=true" class="flex gap-2 w-full" isHighlighted wire:target="{{ $triggerWireTarget }}">
                         {{ $resolvedButtonTitle }}
                     </x-forms.button>
                 @else
-                    <x-forms.button @click="modalOpen=true" class="flex gap-2" isHighlighted wire:target>
+                    <x-forms.button @click="modalOpen=true" class="flex gap-2" isHighlighted wire:target="{{ $triggerWireTarget }}">
                         {{ $resolvedButtonTitle }}
                     </x-forms.button>
                 @endif
             @else
                 @if ($buttonFullWidth)
-                    <x-forms.button @click="modalOpen=true" class="flex gap-2 w-full" wire:target>
+                    <x-forms.button @click="modalOpen=true" class="flex gap-2 w-full" wire:target="{{ $triggerWireTarget }}">
                         {{ $resolvedButtonTitle }}
                     </x-forms.button>
                 @else
-                    <x-forms.button @click="modalOpen=true" class="flex gap-2" wire:target>
+                    <x-forms.button @click="modalOpen=true" class="flex gap-2" wire:target="{{ $triggerWireTarget }}">
                         {{ $resolvedButtonTitle }}
                     </x-forms.button>
                 @endif
diff --git a/resources/views/livewire/server/traffic-analytics-settings.blade.php b/resources/views/livewire/server/traffic-analytics-settings.blade.php
index 177bb1a59a..047175cdf8 100644
--- a/resources/views/livewire/server/traffic-analytics-settings.blade.php
+++ b/resources/views/livewire/server/traffic-analytics-settings.blade.php
@@ -10,8 +10,6 @@
             <x-slot:actions>
                 @if ($isTrafficAnalyticsEnabled)
                     <div class="flex items-center gap-3">
-                        <x-loading wire:loading.flex wire:target="toggleTrafficAnalytics"
-                            text="Restarting Sentinel and proxy..." compact />
                         <x-modal-confirmation title="Disable traffic analytics?"
                             buttonTitle="Disable traffic analytics" submitAction="toggleTrafficAnalytics"
                             :actions="[
@@ -80,8 +78,6 @@
                                     Enable traffic analytics
                                 </x-forms.button>
                             @else
-                            <x-loading wire:loading.flex wire:target="toggleTrafficAnalytics"
-                                text="Restarting Sentinel and proxy..." compact />
                             <x-modal-confirmation title="Enable traffic analytics?"
                                 buttonTitle="Enable traffic analytics" submitAction="toggleTrafficAnalytics"
                                 :actions="[
diff --git a/tests/Feature/TrafficAnalytics/ToggleTrafficAnalyticsTest.php b/tests/Feature/TrafficAnalytics/ToggleTrafficAnalyticsTest.php
index 17bc84d4ef..693dbd4d0d 100644
--- a/tests/Feature/TrafficAnalytics/ToggleTrafficAnalyticsTest.php
+++ b/tests/Feature/TrafficAnalytics/ToggleTrafficAnalyticsTest.php
@@ -56,7 +56,7 @@ it('warns about the application interruption before enabling traffic analytics',
 
     Livewire::test(TrafficAnalyticsSettings::class, ['server' => $server])
         ->assertSee('Enable traffic analytics?')
-        ->assertSee('Restarting Sentinel and proxy...')
+        ->assertSeeHtml('wire:target="toggleTrafficAnalytics"')
         ->assertSee('Enabling traffic analytics will restart Sentinel and the proxy. Your applications will experience a brief interruption.');
 });