boban
/
nimuli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): button spinner overlay — text fades to 50%, no layout shift 

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>
main
boban 2026-05-17 15:11:56 +02:00
parent add7957430
commit 36b335819a
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/views/components/ui/button.blade.php
View File

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