Added a loading indicator (#2)

* Added a loading indicator * Close span tag
ramonrietdijk · May 19, 2023 · c0b3928 · c0b3928
1 parent 841c09a
commit c0b3928
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/resources/views/bar/bar.blade.php b/resources/views/bar/bar.blade.php
@@ -4,6 +4,9 @@
                placeholder="@lang('Search all columns...')"
                class="border border-neutral-200 shadow-sm rounded-md outline-none focus:border-blue-300 px-3 py-2 bg-white text-black transition ease-in-out dark:bg-neutral-800 dark:border-neutral-700 dark:focus:border-blue-600 dark:text-white"
                wire:model.debounce.500ms="globalSearch">
+        <div class="justify-center items-center w-full border-y border-transparent" wire:loading.flex>
+            <span class="inline-block border border-4 border-blue-500 border-r-transparent motion-safe:animate-spin rounded-full my-2 p-2"></span>
+        </div>
         @include('livewire-table::bar.selection')
         <div class="flex gap-3 ml-auto">
             @include('livewire-table::bar.dropdowns.polling')

diff --git a/resources/views/bar/selection.blade.php b/resources/views/bar/selection.blade.php
@@ -1,5 +1,5 @@
 @if(count($this->selected) > 0)
-    <div class="w-full" wire:key="{{ $this->id }}-selection">
+    <div class="w-full" wire:key="{{ $this->id }}-selection" wire:loading.remove>
         <div
             class="bg-blue-50 px-3 py-2 text-sm text-blue-800 border border-blue-100 rounded-md shadow-sm flex items-center gap-1 dark:bg-blue-900 dark:text-blue-300 dark:border-blue-600">
             <x-heroicon-o-list-bullet class="w-6 h-6"/>

diff --git a/resources/views/components/dropdown.blade.php b/resources/views/components/dropdown.blade.php
@@ -2,7 +2,7 @@
 
 <div class="md:relative z-10" x-data="{ show: false }">
     <button
-        class="flex items-center gap-1 px-3 py-1 bg-white border border-neutral-200 text-neutral-800 hover:text-neutral-500 focus:border-blue-300 active:bg-neutral-100 active:text-neutral-800 transition ease-in-out rounded-md shadow-sm h-full text-sm dark:bg-neutral-800 dark:border-neutral-700 dark:focus:border-blue-600 dark:text-neutral-300 dark:hover:text-white dark:focus:border-blue-600 dark:active:bg-neutral-900 dark:active:text-white"
+        class="flex items-center gap-1 px-3 py-2 bg-white border border-neutral-200 text-neutral-800 hover:text-neutral-500 focus:border-blue-300 active:bg-neutral-100 active:text-neutral-800 transition ease-in-out rounded-md shadow-sm h-full text-sm dark:bg-neutral-800 dark:border-neutral-700 dark:focus:border-blue-600 dark:text-neutral-300 dark:hover:text-white dark:focus:border-blue-600 dark:active:bg-neutral-900 dark:active:text-white"
         @if(isset($label))
             title="{{ $label }}"
             aria-label="{{ $label }}"