yico/resources/views/filament/pages/auth/captcha.blade.php

<!-- resources/views/filament/pages/auth/captcha.blade.php -->
<div class="space-y-2">
    <div class="flex items-center justify-between">
        <span class="text-sm font-medium leading-6 text-gray-950 dark:text-white">
            Verification Code
        </span>
    </div>

    <div class="relative bg-white dark:bg-gray-900 rounded-lg p-2">
        <div class="flex items-center space-x-4">
            {{-- 驗證碼圖片 --}}
            <div class="relative">
                <img
                    x-data
                    x-on:captcha-refreshed.window="
                        $el.style.opacity = '0';
                        setTimeout(() => {
                            $el.src = $wire.captchaImage;
                            $el.style.opacity = '1';
                        }, 150);
                    "
                    src="{{ $this->captchaImage }}"
                    alt="Verification Code"
                    class="h-12 rounded border border-gray-300 dark:border-gray-700 transition-opacity duration-150"
                />

                {{-- 加載動畫 --}}
                <div
                    wire:loading
                    wire:target="refreshCaptcha"
                    class="absolute inset-0 flex items-center justify-center bg-white/50 dark:bg-gray-900/50 rounded"
                >
                    <svg class="animate-spin h-5 w-5 text-primary-500" 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>
                </div>
            </div>

            {{-- 刷新按鈕 --}}
            <button
                type="button"
                wire:click="refreshCaptcha"
                wire:loading.attr="disabled"
                class="flex items-center justify-center p-2 rounded-lg text-gray-500 hover:text-primary-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900 transition-colors duration-150"
            >
                <span wire:loading.remove wire:target="refreshCaptcha">
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                </span>
                <span
                    wire:loading
                    wire:target="refreshCaptcha"
                    class="text-primary-500"
                >
                    <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>
                </span>
            </button>
        </div>
    </div>
</div>