core/php-framework
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix login button showing all states at once

Browse source 
- Add @fluxAppearance and @fluxScripts to Demo layout
- Replace custom button with flux:button component
- Flux button handles loading states internally

The wire:loading directives weren't working because Livewire's
CSS wasn't being parsed by the browser (style sheet not applied).
Using Flux's button component resolves this cleanly.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Snider 2026-01-23 11:55:23 +00:00
parent febfeb5fdb
commit f6c688d4e1
2 changed files with 5 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Website/Demo/View/Blade/layouts/app.blade.php
View file

@ -8,6 +8,7 @@
<title>{{ $title ?? config('app.name', 'Core PHP') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@fluxAppearance
@livewireStyles
</head>
<body class="font-sans antialiased bg-zinc-900 text-zinc-100 min-h-screen">
@ -21,6 +22,7 @@
{{ $slot }}
</div>
@fluxScripts
@livewireScripts
</body>
</html>

17
app/Website/Demo/View/Blade/web/login.blade.php
View file

@ -53,20 +53,9 @@
</div>
{{-- Submit --}}
<button
type="submit"
class="w-full px-6 py-3 bg-violet-600 hover:bg-violet-500 text-white rounded-lg font-medium transition flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
wire:loading.attr="disabled"
>
<span wire:loading.remove>Sign in</span>
<span wire:loading class="flex items-center gap-2">
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Signing in...
</span>
</button>
<flux:button type="submit" variant="primary" class="w-full">
Sign in
</flux:button>
</form>
{{-- Back to home --}}