new loading state

README.md

@@ -197,6 +197,37 @@ If we want to remove it, we can add the method `firstRemoved()`.
 
 comming soon... 
 
+## Loading... 
+
+You can activate or deactivate the loading state, modifying the attribute `$loading`, in your component:
+
+```php 
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Livewire;
+
+use App\Models\Car;
+use App\Models\Extra;
+use App\Models\Option;
+use Daguilarm\LivewireCombobox\Components\ComboboxLivewireComponent;
+use Daguilarm\LivewireCombobox\Components\Fields\Select;
+use Daguilarm\LivewireCombobox\Contracts\Combobox;
+
+class ComboboxCars extends ComboboxLivewireComponent implements Combobox
+{
+    public bool $loading = false;
+
+    public function elements(): array
+    {
+        return [];
+    }
+}
+```
+
+By default it is activated (true). The template file is located at: `resources/views/vendor/livewire-combobox/loading.blade.php`.
+
 ## Customize the display of elements
 
 The package uses **TailwindCSS** so the styles must be based on it. The structure of the elements is as follows:

resources/views/combobox.blade.php

@@ -1,6 +1,17 @@
 <div class="{{ $comboboxContainerClass ?? 'flex' }}">
+
+    {{-- Elements --}}
     @foreach ($elements as $element)
         {{-- Include a select field --}}
         @includeWhen(Combobox::value($element, 'type') === 'select', 'livewire-combobox::type.select')
     @endforeach
+
+    {{-- Loading --}}
+    @if ($loading)
+        <div class="flex relative" wire:loading>
+            <div class="fixed">
+                @include('livewire-combobox::loading')
+            </div>
+        </div
+    @endif
 </div>

resources/views/loading.blade.php

@@ -0,0 +1,71 @@
+<style>
+    :root {
+      --background: rgba(129, 140, 248, 1);
+    }
+
+    .loading-ellipsis {
+      position: relative;
+      width: 80px;
+      height: 40px;
+      margin-top: -10px;
+    }
+
+    .loading-ellipsis div {
+      position: absolute;
+      top: 33px;
+      width: 13px;
+      height: 13px;
+      border-radius: 50%;
+      background: var(--background);
+      animation-timing-function: cubic-bezier(0, 1, 1, 0);
+    }
+
+    .loading-ellipsis div:nth-child(1) {
+      left: 8px;
+      animation: loading-ellipsis1 0.6s infinite;
+    }
+
+    .loading-ellipsis div:nth-child(2) {
+      left: 8px;
+      animation: loading-ellipsis2 0.6s infinite;
+    }
+
+    .loading-ellipsis div:nth-child(3) {
+      left: 32px;
+      animation: loading-ellipsis2 0.6s infinite;
+    }
+
+    .loading-ellipsis div:nth-child(4) {
+      left: 56px;
+      animation: loading-ellipsis3 0.6s infinite;
+    }
+
+    @keyframes loading-ellipsis1 {
+      0% {
+        transform: scale(0);
+      }
+      100% {
+        transform: scale(1);
+      }
+    }
+
+    @keyframes loading-ellipsis3 {
+      0% {
+        transform: scale(1);
+      }
+      100% {
+        transform: scale(0);
+      }
+    }
+
+    @keyframes loading-ellipsis2 {
+      0% {
+        transform: translate(0, 0);
+      }
+      100% {
+        transform: translate(24px, 0);
+      }
+    }
+</style>
+
+<div class="loading-ellipsis"><div></div><div></div><div></div><div></div></div>

src/Components/ComboboxLivewireComponent.php

@@ -22,13 +22,15 @@ abstract class ComboboxLivewireComponent extends Component
      */
     public array $comboboxValues = [];
 
-    public string $comboboxContainerClass;
-
     /**
      * @var array<Illuminate\Support\Collection>
      */
     public array $elements;
 
+    public bool $loading = true;
+
+    public string $comboboxContainerClass;
+
     /**
      * Listeners.
      *