Added new loading component and used it on the toolbar

Author: Gustavinho

resources/views/components/confirmation-message.blade.php

@@ -17,9 +17,8 @@
         <x-lv-button variant="danger" @click="await $wire.call('confirmAndExecuteAction', action, id, false); open = false" wire:loading.attr="disabled">
           {{ __("Yes, I'm sure") }}
         </x-lv-button>
-        <span wire:loading class="animate-spin">
-          {!! UI::icon('loader') !!}
-        </span>
+
+        <x-lv-loading wire:loading />
       </div>
     </x-lv-modal>
   </div>

resources/views/components/loading.blade.php

@@ -0,0 +1,3 @@
+<span {{ $attributes->merge(['class' => 'animate-spin']) }}>
+  {!! UI::icon('loader', '', 'text-gray-500') !!}
+</span>

resources/views/components/toolbar/bulk-actions.blade.php

@@ -9,7 +9,7 @@
   @if ($this->hasBulkActions && isset($headers) <= 0)
     <button
       wire:click="$set('allSelected', {{ !$allSelected }})"
-      class="border border-transparent hover:border-gray-300 focus:border-gray-300 focus:outline-none flex items-center gap-1 text-xs px-3 py-2 rounded hover:shadow-sm font-medium"
+      class="border border-transparent hover:border-gray-300 focus:border-gray-300 focus:outline-none flex items-center text-xs px-3 py-2 rounded hover:shadow-sm font-medium"
     >
       {{ __($allSelected ? 'Unselect all' : 'Select all') }}
     </button>

resources/views/components/toolbar/filters.blade.php

@@ -16,9 +16,9 @@
 
     @if (count($filters) > 0)
       {{-- Clear filters button --}}
-      <div class="p-4 bg-gray-100 text-right flex justify-end">
+      <div class="px-4 py-2 bg-gray-100 text-right flex justify-end border-t border-gray-200">
         <button wire:click.prevent="clearFilters" @click="open = false" class="text-gray-600 flex items-center hover:text-gray-700 focus:outline-none text-sm">
-          <i data-feather="x-circle" class="mr-2 w-5 h-5"></i>
+          <i data-feather="slash" class="mr-2 w-4 h-4"></i>
           {{__('Clear filters')}}
         </button>
       </div>

resources/views/components/toolbar/sorting.blade.php

@@ -16,7 +16,7 @@
       </x-lv-select-button>
     </x-slot>
 
-    <x-lv-drop-down.header label="Sort by" />
+    <x-lv-drop-down.header label="{{ __('Sort by') }}" />
 
     {{-- Each sortable item --}}
     @foreach ($sortableBy as $title => $column)

resources/views/components/toolbar/toolbar.blade.php

@@ -14,6 +14,8 @@
 
   {{-- Actions on the left --}}
   <div class="flex space-x-1 flex-1 justify-end items-center mb-4">
+    <x-lv-loading class="mb-0" wire:loading />
+
     {{-- Bulk actions --}}
     <div>
       @include('laravel-views::components.toolbar.bulk-actions')

resources/views/components/tooltip.blade.php

@@ -1,15 +1,15 @@
 @props(['tooltip' => ''])
 
-<div x-data="{ tooltip: false }" class="cursor-pointer relative z-30 inline-flex" @mousemove.away="tooltip = false">
+<div x-data="{ tooltip: false }" class="cursor-pointer relative inline-flex" @mousemove.away="tooltip = false">
   <span @mousemove="tooltip = true" @mouseleave="tooltip = false">
     {{ $slot }}
   </span>
 
   <div class="relative" x-cloak x-show.transition.origin.top="tooltip">
-    <div class="flex justify-center absolute top-0 z-30 w-32 p-2 -mt-3 text-sm leading-tight text-white transform -translate-x-1/2 -translate-y-full bg-gray-800 rounded-md shadow-md">
+    <div class="flex justify-center absolute top-0 z-10 w-32 p-2 -mt-3 text-sm leading-tight text-white transform -translate-x-1/2 -translate-y-full bg-gray-800 rounded-md shadow-md">
       {{ $tooltip }}
     </div>
-    <svg class="absolute z-30 w-6 h-6 text-gray-800 transform -translate-x-8 -translate-y-5 fill-current stroke-current" width="8" height="8">
+    <svg class="absolute z-10 w-6 h-6 text-gray-800 transform -translate-x-8 -translate-y-5 fill-current stroke-current" width="8" height="8">
       <rect x="12" y="-10" width="8" height="8" transform="rotate(45)" />
     </svg>
   </div>

src/LaravelViews.php

@@ -33,7 +33,8 @@ public function components()
             'form.checkbox' => 'checkbox',
             'form.input' => 'input',
             'tooltip' => 'tooltip',
-            'confirmation-message' => 'confirmation-message'
+            'confirmation-message' => 'confirmation-message',
+            'loading' => 'loading'
         ];
     }