better loading button

Author: QuentinGab

resources/css/components/button.css

@@ -6,6 +6,24 @@
                 active:outline-2
                 has-focus-visible:outline-2;
 
+        &[data-loading],
+        &[loading],
+        &.el-loading {
+            @apply pointer-events-none;
+        }
+
+        & .el-loader {
+            @apply hidden absolute left-0 top-0 gap-2 h-full w-full items-center justify-center;
+            border-radius: inherit;
+            background: inherit;
+        }
+
+        &[data-loading] .el-loader,
+        &[loading] .el-loader,
+        &.el-loading .el-loader {
+            @apply flex;
+        }
+
         & input {
             @apply pointer-events-none absolute left-0 top-0 size-full appearance-none opacity-0;
         }

resources/css/components/shared.css

@@ -174,47 +174,47 @@
         }
         &[data-color="sky-light"],
         &.el-color-sky-light {
-            @apply ring-sky-500;
+            @apply ring-sky-200;
         }
         &[data-color="emerald"],
         &.el-color-emerald {
             @apply ring-emerald-600;
         }
         &[data-color="emerald-light"],
         &.el-color-emerald-light {
-            @apply ring-emerald-500;
+            @apply ring-emerald-200;
         }
         &[data-color="rose"],
         &.el-color-rose {
             @apply ring-rose-600;
         }
         &[data-color="rose-light"],
         &.el-color-rose-light {
-            @apply ring-rose-500;
+            @apply ring-rose-200;
         }
         &[data-color="purple"],
         &.el-color-purple {
             @apply ring-purple-600;
         }
         &[data-color="purple-light"],
         &.el-color-purple-light {
-            @apply ring-purple-500;
+            @apply ring-purple-200;
         }
         &[data-color="yellow"],
         &.el-color-yellow {
             @apply ring-yellow-600;
         }
         &[data-color="yellow-light"],
         &.el-color-yellow-light {
-            @apply ring-yellow-500;
+            @apply ring-yellow-200;
         }
         &[data-color="amber"],
         &.el-color-amber {
             @apply ring-amber-600;
         }
         &[data-color="amber-light"],
         &.el-color-amber-light {
-            @apply ring-amber-500;
+            @apply ring-amber-200;
         }
         &[data-color="glass"],
         &.el-color-glass {

resources/views/components/button/index.blade.php

@@ -7,7 +7,6 @@
     'content' => null,
     'offset' => true,
     'loader' => null,
-    'loading' => false,
     'badge' => null,
     'before' => null,
     'input' => null,
@@ -24,7 +23,7 @@
     $target,
     fn($a) => $a->merge([
         'wire:loading.attr' => 'disabled',
-        'wire:loading.class' => 'pointer-events-none',
+        'wire:loading.class' => 'el-loading',
     ]),
 )" :size="$size" :color-checked="$_colorChecked" :tag="$_tag">
     {!! $before !!}
@@ -69,10 +68,11 @@
         <x-kit::button.icon :icon="$iconRight" :offset="$offset" :size="$size" :attributes="$iconAttributes" />
     @endif
 
-    @if ($target || $loading)
-        <x-kit::button.loader :loading="$loading"
-            wire:target="{{ $target }}">{{ $loader }}</x-kit::buttons.loader>
-    @endif
+    <span class="el-loader">
+        <span
+            class="animate-spin-loader size-4 rounded-full border-2 border-current border-r-transparent border-t-transparent"></span>
+        {{ $loader }}
+    </span>
 
     {!! $after !!}
 </x-kit::button.base>

resources/views/components/button/loader.blade.php

@@ -34,14 +34,39 @@
             <div class="p-3">
                 <h1 class="font-semibold">Button</h1>
             </div>
-            <div class="flex grow items-center justify-center border-b border-gray-200">
+            <div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
                 <x-kit::button color="rose" class="rounded-md ring-1 ring-inset">
                     Button
-
-                    <x-slot:icon>
+                    <x-slot:icon-right>
                         <iconify-icon icon="heroicons:check"></iconify-icon>
-                    </x-slot:icon>
+                    </x-slot:icon-right>
+                </x-kit::button>
+
+                <x-kit::button color="rose-light" class="rounded-md ring-1 ring-inset">
+                    Button
+                </x-kit::button>
+
+            </div>
+        </div>
+
+        <div class="isolate flex flex-col">
+            <div class="p-3">
+                <h1 class="font-semibold">Loading button</h1>
+            </div>
+            <div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
+
+                <x-kit::button color="white" class="rounded-md ring-1 ring-inset" data-loading>
+                    Button
                 </x-kit::button>
+
+                <x-kit::button color="sky-light" class="el-loading rounded-md ring-1 ring-inset">
+                    Button
+                </x-kit::button>
+
+                <x-kit::button color="sky-light" class="rounded-md ring-1 ring-inset" loading>
+                    Button
+                </x-kit::button>
+
             </div>
         </div>