From 36b335819af64675568655561ebe523716fcc967 Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Sun, 17 May 2026 15:11:56 +0200
Subject: [PATCH] =?UTF-8?q?fix(ui):=20button=20spinner=20overlay=20?=
 =?UTF-8?q?=E2=80=94=20text=20fades=20to=2050%,=20no=20layout=20shift?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Keep label in DOM with opacity-50 during loading, spinner sits as
absolute inset-0 overlay. Button width stays constant, no jump.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/components/ui/button.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/ui/button.blade.php b/resources/views/components/ui/button.blade.php
index e1c3a85..b6c8361 100644
--- a/resources/views/components/ui/button.blade.php
+++ b/resources/views/components/ui/button.blade.php
@@ -21,11 +21,11 @@ $cls = $base . ' ' . ($variants[$variant] ?? $variants['primary']);
     {{ $attributes->merge(['type' => $type, 'class' => $cls]) }}
     @if($action) wire:loading.attr="disabled" wire:target="{{ $action }}" @endif
 >
-    <span @if($action) wire:loading.remove wire:target="{{ $action }}" @endif class="flex items-center gap-2">
+    <span @if($action) wire:loading.class="opacity-50" wire:target="{{ $action }}" @endif class="flex items-center gap-2">
         {{ $slot->isNotEmpty() ? $slot : $label }}
     </span>
     @if($action)
-        <span wire:loading wire:target="{{ $action }}" class="flex items-center justify-center">
+        <span wire:loading wire:target="{{ $action }}" class="absolute inset-0 flex items-center justify-center pointer-events-none">
             <svg class="animate-spin w-5 h-5 flex-shrink-0" viewBox="0 0 24 24" fill="none">
                 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5" stroke-opacity="0.25"/>
                 <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="2.5"