From bb16e8ff458a1519c6655c6c1b82ebdba00b2b75 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 22:29:05 +0100
Subject: [PATCH 01/36] Initial Loading Placeholder Code

---
 .../components/includes/loading.blade.php     | 10 ++++
 resources/views/datatable.blade.php           |  3 ++
 src/DataTableComponent.php                    |  2 +
 src/Traits/ComponentUtilities.php             |  1 +
 .../Configuration/LoadingConfiguration.php    | 50 +++++++++++++++++++
 src/Traits/Helpers/LoadingHelpers.php         | 37 ++++++++++++++
 src/Traits/WithLoading.php                    | 21 ++++++++
 7 files changed, 124 insertions(+)
 create mode 100644 resources/views/components/includes/loading.blade.php
 create mode 100644 src/Traits/Configuration/LoadingConfiguration.php
 create mode 100644 src/Traits/Helpers/LoadingHelpers.php
 create mode 100644 src/Traits/WithLoading.php

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
new file mode 100644
index 000000000..a42aa942a
--- /dev/null
+++ b/resources/views/components/includes/loading.blade.php
@@ -0,0 +1,10 @@
+@props(['colCount' => 1])
+
+<tr class="w-full text-center hidden h-screen place-items-center align-middle" wire:loading.class.remove="hidden">
+    <td  class=" place-items-center	" colspan="{{ $colCount }}">
+        <div class="h-min self-center align-middle">
+            <div class="lds-hourglass"></div>
+            <div>Loading...</div>
+        </div>
+    </td>
+</tr>
diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
index 1d6307f94..9a07de17c 100644
--- a/resources/views/datatable.blade.php
+++ b/resources/views/datatable.blade.php
@@ -30,6 +30,9 @@
             @if($this->secondaryHeaderIsEnabled() && $this->hasColumnsWithSecondaryHeader())
                 <x-livewire-tables::table.tr.secondary-header :rows="$rows" />
             @endif
+            @if($this->hasDisplayLoadingPlaceholder())
+            <x-livewire-tables::includes.loading colCount="{{ $this->columns->count()+1 }}" />
+            @endif
 
             <x-livewire-tables::table.tr.bulk-actions :rows="$rows" :displayMinimisedOnReorder="true" />
 
diff --git a/src/DataTableComponent.php b/src/DataTableComponent.php
index 7733b00c0..fc3dbe3df 100644
--- a/src/DataTableComponent.php
+++ b/src/DataTableComponent.php
@@ -14,6 +14,7 @@
 use Rappasoft\LaravelLivewireTables\Traits\WithEvents;
 use Rappasoft\LaravelLivewireTables\Traits\WithFilters;
 use Rappasoft\LaravelLivewireTables\Traits\WithFooter;
+use Rappasoft\LaravelLivewireTables\Traits\WithLoading;
 use Rappasoft\LaravelLivewireTables\Traits\WithPagination;
 use Rappasoft\LaravelLivewireTables\Traits\WithRefresh;
 use Rappasoft\LaravelLivewireTables\Traits\WithReordering;
@@ -32,6 +33,7 @@ abstract class DataTableComponent extends Component
         WithEvents,
         WithFilters,
         WithFooter,
+        WithLoading,
         WithPagination,
         WithRefresh,
         WithReordering,
diff --git a/src/Traits/ComponentUtilities.php b/src/Traits/ComponentUtilities.php
index 23cef152e..7a96bf8f3 100644
--- a/src/Traits/ComponentUtilities.php
+++ b/src/Traits/ComponentUtilities.php
@@ -66,6 +66,7 @@ trait ComponentUtilities
 
     protected bool $hideConfigurableAreasWhenReorderingStatus = true;
 
+
     protected array $configurableAreas = [
         'before-tools' => null,
         'toolbar-left-start' => null,
diff --git a/src/Traits/Configuration/LoadingConfiguration.php b/src/Traits/Configuration/LoadingConfiguration.php
new file mode 100644
index 000000000..1676c313e
--- /dev/null
+++ b/src/Traits/Configuration/LoadingConfiguration.php
@@ -0,0 +1,50 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
+
+trait LoadingConfiguration
+{
+    public function setLoadingPlaceholderStatus(bool $status): self
+    {
+        $this->displayLoadingPlaceholder = $status;
+
+        return $this;
+    }
+
+    public function setLoadingPlaceholderEnabled(): self
+    {
+        $this->setLoadingPlaceholderStatus(true);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceholderDisabled(): self
+    {
+        $this->setLoadingPlaceholderStatus(false);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceholderContent(string $content): self
+    {
+        $this->loadingPlaceholderContent = $content;
+
+        return $this;
+    }  
+
+
+    public function setLoadingPlaceHolderAttributes(array $attributes): self
+    {
+        $this->loadingPlaceHolderAttributes = $attributes;
+
+        return $this;
+    }
+
+    public function setLoadingPlaceHolderIconAttributes(array $attributes): self
+    {
+        $this->loadingPlaceHolderIconAttributes = $attributes;
+
+        return $this;
+    }
+
+}
\ No newline at end of file
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
new file mode 100644
index 000000000..61ecaadea
--- /dev/null
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
+
+trait LoadingHelpers
+{
+    public function hasDisplayLoadingPlaceholder(): bool
+    {
+        return $this->displayLoadingPlaceholder;
+    }
+
+    public function getDisplayLoadingPlaceholder(): bool
+    {
+        return $this->displayLoadingPlaceholder;
+    }
+
+    public function hasLoadingPlaceholderAttributes(): bool
+    {
+        return !empty($this->loadingPlaceHolderAttributes);
+    }
+
+    public function getLoadingPlaceholderAttributes(): array
+    {
+        return $this->loadingPlaceHolderAttributes;
+    }
+    
+    public function hasPlaceHolderIconAttributes(): bool
+    {
+        return !empty($this->loadingPlaceHolderIconAttributes);
+    }
+
+    public function getPlaceHolderIconAttributes(): array
+    {
+        return $this->loadingPlaceHolderIconAttributes;
+    }
+
+}
\ No newline at end of file
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoading.php
new file mode 100644
index 000000000..3a2b45d63
--- /dev/null
+++ b/src/Traits/WithLoading.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits;
+
+use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingHelpers;
+
+trait WithLoading
+{
+    use LoadingConfiguration,
+    LoadingHelpers;
+
+    protected bool $displayLoadingPlaceholder = false;
+
+    protected string $loadingPlaceholderContent = "Loading";
+    
+    protected array $loadingPlaceHolderAttributes = [];
+    
+    protected array $loadingPlaceHolderIconAttributes = [];
+
+}
\ No newline at end of file

From 5d345d8eca06a96b35c8be7a098261b3604d4205 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 21:29:32 +0000
Subject: [PATCH 02/36] Fix styling

---
 src/Traits/ComponentUtilities.php             |  1 -
 .../Configuration/LoadingConfiguration.php    | 98 +++++++++----------
 src/Traits/Helpers/LoadingHelpers.php         | 73 +++++++-------
 src/Traits/WithLoading.php                    | 41 ++++----
 4 files changed, 104 insertions(+), 109 deletions(-)

diff --git a/src/Traits/ComponentUtilities.php b/src/Traits/ComponentUtilities.php
index 7a96bf8f3..23cef152e 100644
--- a/src/Traits/ComponentUtilities.php
+++ b/src/Traits/ComponentUtilities.php
@@ -66,7 +66,6 @@ trait ComponentUtilities
 
     protected bool $hideConfigurableAreasWhenReorderingStatus = true;
 
-
     protected array $configurableAreas = [
         'before-tools' => null,
         'toolbar-left-start' => null,
diff --git a/src/Traits/Configuration/LoadingConfiguration.php b/src/Traits/Configuration/LoadingConfiguration.php
index 1676c313e..de348c843 100644
--- a/src/Traits/Configuration/LoadingConfiguration.php
+++ b/src/Traits/Configuration/LoadingConfiguration.php
@@ -1,50 +1,48 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
-
-trait LoadingConfiguration
-{
-    public function setLoadingPlaceholderStatus(bool $status): self
-    {
-        $this->displayLoadingPlaceholder = $status;
-
-        return $this;
-    }
-
-    public function setLoadingPlaceholderEnabled(): self
-    {
-        $this->setLoadingPlaceholderStatus(true);
-
-        return $this;
-    }
-
-    public function setLoadingPlaceholderDisabled(): self
-    {
-        $this->setLoadingPlaceholderStatus(false);
-
-        return $this;
-    }
-
-    public function setLoadingPlaceholderContent(string $content): self
-    {
-        $this->loadingPlaceholderContent = $content;
-
-        return $this;
-    }  
-
-
-    public function setLoadingPlaceHolderAttributes(array $attributes): self
-    {
-        $this->loadingPlaceHolderAttributes = $attributes;
-
-        return $this;
-    }
-
-    public function setLoadingPlaceHolderIconAttributes(array $attributes): self
-    {
-        $this->loadingPlaceHolderIconAttributes = $attributes;
-
-        return $this;
-    }
-
-}
\ No newline at end of file
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
+
+trait LoadingConfiguration
+{
+    public function setLoadingPlaceholderStatus(bool $status): self
+    {
+        $this->displayLoadingPlaceholder = $status;
+
+        return $this;
+    }
+
+    public function setLoadingPlaceholderEnabled(): self
+    {
+        $this->setLoadingPlaceholderStatus(true);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceholderDisabled(): self
+    {
+        $this->setLoadingPlaceholderStatus(false);
+
+        return $this;
+    }
+
+    public function setLoadingPlaceholderContent(string $content): self
+    {
+        $this->loadingPlaceholderContent = $content;
+
+        return $this;
+    }
+
+    public function setLoadingPlaceHolderAttributes(array $attributes): self
+    {
+        $this->loadingPlaceHolderAttributes = $attributes;
+
+        return $this;
+    }
+
+    public function setLoadingPlaceHolderIconAttributes(array $attributes): self
+    {
+        $this->loadingPlaceHolderIconAttributes = $attributes;
+
+        return $this;
+    }
+}
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 61ecaadea..d6272d495 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -1,37 +1,36 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
-
-trait LoadingHelpers
-{
-    public function hasDisplayLoadingPlaceholder(): bool
-    {
-        return $this->displayLoadingPlaceholder;
-    }
-
-    public function getDisplayLoadingPlaceholder(): bool
-    {
-        return $this->displayLoadingPlaceholder;
-    }
-
-    public function hasLoadingPlaceholderAttributes(): bool
-    {
-        return !empty($this->loadingPlaceHolderAttributes);
-    }
-
-    public function getLoadingPlaceholderAttributes(): array
-    {
-        return $this->loadingPlaceHolderAttributes;
-    }
-    
-    public function hasPlaceHolderIconAttributes(): bool
-    {
-        return !empty($this->loadingPlaceHolderIconAttributes);
-    }
-
-    public function getPlaceHolderIconAttributes(): array
-    {
-        return $this->loadingPlaceHolderIconAttributes;
-    }
-
-}
\ No newline at end of file
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
+
+trait LoadingHelpers
+{
+    public function hasDisplayLoadingPlaceholder(): bool
+    {
+        return $this->displayLoadingPlaceholder;
+    }
+
+    public function getDisplayLoadingPlaceholder(): bool
+    {
+        return $this->displayLoadingPlaceholder;
+    }
+
+    public function hasLoadingPlaceholderAttributes(): bool
+    {
+        return ! empty($this->loadingPlaceHolderAttributes);
+    }
+
+    public function getLoadingPlaceholderAttributes(): array
+    {
+        return $this->loadingPlaceHolderAttributes;
+    }
+
+    public function hasPlaceHolderIconAttributes(): bool
+    {
+        return ! empty($this->loadingPlaceHolderIconAttributes);
+    }
+
+    public function getPlaceHolderIconAttributes(): array
+    {
+        return $this->loadingPlaceHolderIconAttributes;
+    }
+}
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoading.php
index 3a2b45d63..8b9a6ff23 100644
--- a/src/Traits/WithLoading.php
+++ b/src/Traits/WithLoading.php
@@ -1,21 +1,20 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Traits;
-
-use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingConfiguration;
-use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingHelpers;
-
-trait WithLoading
-{
-    use LoadingConfiguration,
-    LoadingHelpers;
-
-    protected bool $displayLoadingPlaceholder = false;
-
-    protected string $loadingPlaceholderContent = "Loading";
-    
-    protected array $loadingPlaceHolderAttributes = [];
-    
-    protected array $loadingPlaceHolderIconAttributes = [];
-
-}
\ No newline at end of file
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits;
+
+use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingHelpers;
+
+trait WithLoading
+{
+    use LoadingConfiguration,
+        LoadingHelpers;
+
+    protected bool $displayLoadingPlaceholder = false;
+
+    protected string $loadingPlaceholderContent = 'Loading';
+
+    protected array $loadingPlaceHolderAttributes = [];
+
+    protected array $loadingPlaceHolderIconAttributes = [];
+}

From e41b023c93a5d2167b8c5df14c5677b213450aa7 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 22:31:27 +0100
Subject: [PATCH 03/36] Amending Helpers

---
 src/Traits/Helpers/LoadingHelpers.php | 83 +++++++++++++++------------
 1 file changed, 47 insertions(+), 36 deletions(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index d6272d495..84297de8a 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -1,36 +1,47 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
-
-trait LoadingHelpers
-{
-    public function hasDisplayLoadingPlaceholder(): bool
-    {
-        return $this->displayLoadingPlaceholder;
-    }
-
-    public function getDisplayLoadingPlaceholder(): bool
-    {
-        return $this->displayLoadingPlaceholder;
-    }
-
-    public function hasLoadingPlaceholderAttributes(): bool
-    {
-        return ! empty($this->loadingPlaceHolderAttributes);
-    }
-
-    public function getLoadingPlaceholderAttributes(): array
-    {
-        return $this->loadingPlaceHolderAttributes;
-    }
-
-    public function hasPlaceHolderIconAttributes(): bool
-    {
-        return ! empty($this->loadingPlaceHolderIconAttributes);
-    }
-
-    public function getPlaceHolderIconAttributes(): array
-    {
-        return $this->loadingPlaceHolderIconAttributes;
-    }
-}
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
+
+trait LoadingHelpers
+{
+    public function hasDisplayLoadingPlaceholder(): bool
+    {
+        return $this->getDisplayLoadingPlaceholder();
+    }
+
+    public function getDisplayLoadingPlaceholder(): bool
+    {
+        return $this->displayLoadingPlaceholder;
+    }
+
+    public function hasLoadingPlaceholderContent(): bool
+    {
+        return !is_null($this->getLoadingPlaceholderContent());
+    }
+
+    public function getLoadingPlaceholderContent(): string
+    {
+        return $this->loadingPlaceholderContent;
+    }
+
+
+    public function hasLoadingPlaceholderAttributes(): bool
+    {
+        return !empty($this->getLoadingPlaceholderAttributes());
+    }
+
+    public function getLoadingPlaceholderAttributes(): array
+    {
+        return $this->loadingPlaceHolderAttributes;
+    }
+
+    public function hasPlaceHolderIconAttributes(): bool
+    {
+        return !empty($this->getPlaceHolderIconAttributes());
+    }
+
+    public function getPlaceHolderIconAttributes(): array
+    {
+        return $this->loadingPlaceHolderIconAttributes;
+    }
+}

From 7d4d29fe174eb4251d7d1eacc5e3de55ab5a7ec2 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 21:31:55 +0000
Subject: [PATCH 04/36] Fix styling

---
 src/Traits/Helpers/LoadingHelpers.php | 93 +++++++++++++--------------
 1 file changed, 46 insertions(+), 47 deletions(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 84297de8a..b6977de19 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -1,47 +1,46 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
-
-trait LoadingHelpers
-{
-    public function hasDisplayLoadingPlaceholder(): bool
-    {
-        return $this->getDisplayLoadingPlaceholder();
-    }
-
-    public function getDisplayLoadingPlaceholder(): bool
-    {
-        return $this->displayLoadingPlaceholder;
-    }
-
-    public function hasLoadingPlaceholderContent(): bool
-    {
-        return !is_null($this->getLoadingPlaceholderContent());
-    }
-
-    public function getLoadingPlaceholderContent(): string
-    {
-        return $this->loadingPlaceholderContent;
-    }
-
-
-    public function hasLoadingPlaceholderAttributes(): bool
-    {
-        return !empty($this->getLoadingPlaceholderAttributes());
-    }
-
-    public function getLoadingPlaceholderAttributes(): array
-    {
-        return $this->loadingPlaceHolderAttributes;
-    }
-
-    public function hasPlaceHolderIconAttributes(): bool
-    {
-        return !empty($this->getPlaceHolderIconAttributes());
-    }
-
-    public function getPlaceHolderIconAttributes(): array
-    {
-        return $this->loadingPlaceHolderIconAttributes;
-    }
-}
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
+
+trait LoadingHelpers
+{
+    public function hasDisplayLoadingPlaceholder(): bool
+    {
+        return $this->getDisplayLoadingPlaceholder();
+    }
+
+    public function getDisplayLoadingPlaceholder(): bool
+    {
+        return $this->displayLoadingPlaceholder;
+    }
+
+    public function hasLoadingPlaceholderContent(): bool
+    {
+        return ! is_null($this->getLoadingPlaceholderContent());
+    }
+
+    public function getLoadingPlaceholderContent(): string
+    {
+        return $this->loadingPlaceholderContent;
+    }
+
+    public function hasLoadingPlaceholderAttributes(): bool
+    {
+        return ! empty($this->getLoadingPlaceholderAttributes());
+    }
+
+    public function getLoadingPlaceholderAttributes(): array
+    {
+        return $this->loadingPlaceHolderAttributes;
+    }
+
+    public function hasPlaceHolderIconAttributes(): bool
+    {
+        return ! empty($this->getPlaceHolderIconAttributes());
+    }
+
+    public function getPlaceHolderIconAttributes(): array
+    {
+        return $this->loadingPlaceHolderIconAttributes;
+    }
+}

From 374e5ac978344c2e769432a8d736cdf41b8b3b58 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 22:37:03 +0100
Subject: [PATCH 05/36] Add Hourglass CSS

---
 resources/css/laravel-livewire-tables.css     | 32 +++++++++++++++++++
 resources/css/laravel-livewire-tables.min.css |  2 +-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
index 0073ed497..c0c0e7f51 100644
--- a/resources/css/laravel-livewire-tables.css
+++ b/resources/css/laravel-livewire-tables.css
@@ -362,3 +362,35 @@ label[dir=rtl] .range-slider {
 .superhide {
     display: none;
 }
+
+.lds-hourglass {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-hourglass:after {
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    width: 0;
+    height: 0;
+    margin: 8px;
+    box-sizing: border-box;
+    border: 32px solid #fff;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-hourglass 1.2s infinite;
+  }
+  @keyframes lds-hourglass {
+    0% {
+      transform: rotate(0);
+      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+      transform: rotate(900deg);
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+      transform: rotate(1800deg);
+    }
+  }
\ No newline at end of file
diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index bb9cc4680..b07265545 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -4,4 +4,4 @@
             var(--value, 0),
             var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a),
             var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2,
-                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}
\ No newline at end of file
+                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #fff;border-color:#fff transparent;animation:1.2s infinite lds-hourglass}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file

From 74925743a54172137d3f9628abcc56119fad3356 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 22:42:09 +0100
Subject: [PATCH 06/36] Test V3 Placeholder CSS

---
 resources/css/laravel-livewire-tables.css | 32 ++++++++++++-----------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
index c0c0e7f51..f6dd7cefc 100644
--- a/resources/css/laravel-livewire-tables.css
+++ b/resources/css/laravel-livewire-tables.css
@@ -369,7 +369,8 @@ label[dir=rtl] .range-slider {
     width: 80px;
     height: 80px;
   }
-  .lds-hourglass:after {
+
+.lds-hourglass:after {
     content: " ";
     display: block;
     border-radius: 50%;
@@ -380,17 +381,18 @@ label[dir=rtl] .range-slider {
     border: 32px solid #fff;
     border-color: #fff transparent #fff transparent;
     animation: lds-hourglass 1.2s infinite;
-  }
-  @keyframes lds-hourglass {
-    0% {
-      transform: rotate(0);
-      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    }
-    50% {
-      transform: rotate(900deg);
-      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-    100% {
-      transform: rotate(1800deg);
-    }
-  }
\ No newline at end of file
+}
+
+@keyframes lds-hourglass {
+0% {
+    transform: rotate(0);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+}
+50% {
+    transform: rotate(900deg);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+100% {
+    transform: rotate(1800deg);
+}
+}
\ No newline at end of file

From a93f3183ebc03436a8594a1b0c1862260e34df34 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 23:43:08 +0100
Subject: [PATCH 07/36] Update Table Loader

---
 resources/css/laravel-livewire-tables.css             | 8 ++++----
 resources/css/laravel-livewire-tables.min.css         | 2 +-
 resources/views/components/includes/loading.blade.php | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
index f6dd7cefc..e561e8165 100644
--- a/resources/css/laravel-livewire-tables.css
+++ b/resources/css/laravel-livewire-tables.css
@@ -363,14 +363,14 @@ label[dir=rtl] .range-slider {
     display: none;
 }
 
-.lds-hourglass {
+.table-loader-hourglass {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 80px;
   }
 
-.lds-hourglass:after {
+.table-loader-hourglass:after {
     content: " ";
     display: block;
     border-radius: 50%;
@@ -380,10 +380,10 @@ label[dir=rtl] .range-slider {
     box-sizing: border-box;
     border: 32px solid #fff;
     border-color: #fff transparent #fff transparent;
-    animation: lds-hourglass 1.2s infinite;
+    animation: table-loader-hourglass 1.2s infinite;
 }
 
-@keyframes lds-hourglass {
+@keyframes table-loader-hourglass {
 0% {
     transform: rotate(0);
     animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index b07265545..1475b5b2b 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -4,4 +4,4 @@
             var(--value, 0),
             var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a),
             var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2,
-                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #fff;border-color:#fff transparent;animation:1.2s infinite lds-hourglass}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file
+                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.table-loader-hourglass{display:inline-block;position:relative;width:80px;height:80px}.table-loader-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #fff;border-color:#fff transparent;animation:1.2s infinite table-loader-hourglass}@keyframes table-loader-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file
diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index a42aa942a..4f6a31c0b 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -1,6 +1,6 @@
 @props(['colCount' => 1])
 
-<tr class="w-full text-center hidden h-screen place-items-center align-middle" wire:loading.class.remove="hidden">
+<tr class="w-full text-center hidden h-full place-items-center align-middle" wire:loading.class.remove="hidden">
     <td  class=" place-items-center	" colspan="{{ $colCount }}">
         <div class="h-min self-center align-middle">
             <div class="lds-hourglass"></div>

From ceee48d8e58bbf70518d1e3bb8e164c671e709d4 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 23:45:46 +0100
Subject: [PATCH 08/36] Update Loading

---
 resources/views/components/includes/loading.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index 4f6a31c0b..779c2ec4c 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -3,7 +3,7 @@
 <tr class="w-full text-center hidden h-full place-items-center align-middle" wire:loading.class.remove="hidden">
     <td  class=" place-items-center	" colspan="{{ $colCount }}">
         <div class="h-min self-center align-middle">
-            <div class="lds-hourglass"></div>
+            <div class="table-loader-hourglass"></div>
             <div>Loading...</div>
         </div>
     </td>

From 666160897fd5fcf87a83153661afa7f036d0c26b Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sat, 14 Oct 2023 23:52:28 +0100
Subject: [PATCH 09/36] Hourglass Spinner

---
 resources/css/laravel-livewire-tables.css     | 36 +++++++++----------
 resources/css/laravel-livewire-tables.min.css |  2 +-
 2 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
index e561e8165..c0c0e7f51 100644
--- a/resources/css/laravel-livewire-tables.css
+++ b/resources/css/laravel-livewire-tables.css
@@ -363,14 +363,13 @@ label[dir=rtl] .range-slider {
     display: none;
 }
 
-.table-loader-hourglass {
+.lds-hourglass {
     display: inline-block;
     position: relative;
     width: 80px;
     height: 80px;
   }
-
-.table-loader-hourglass:after {
+  .lds-hourglass:after {
     content: " ";
     display: block;
     border-radius: 50%;
@@ -380,19 +379,18 @@ label[dir=rtl] .range-slider {
     box-sizing: border-box;
     border: 32px solid #fff;
     border-color: #fff transparent #fff transparent;
-    animation: table-loader-hourglass 1.2s infinite;
-}
-
-@keyframes table-loader-hourglass {
-0% {
-    transform: rotate(0);
-    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-}
-50% {
-    transform: rotate(900deg);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-}
-100% {
-    transform: rotate(1800deg);
-}
-}
\ No newline at end of file
+    animation: lds-hourglass 1.2s infinite;
+  }
+  @keyframes lds-hourglass {
+    0% {
+      transform: rotate(0);
+      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+      transform: rotate(900deg);
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+      transform: rotate(1800deg);
+    }
+  }
\ No newline at end of file
diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index 1475b5b2b..b07265545 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -4,4 +4,4 @@
             var(--value, 0),
             var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a),
             var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2,
-                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.table-loader-hourglass{display:inline-block;position:relative;width:80px;height:80px}.table-loader-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #fff;border-color:#fff transparent;animation:1.2s infinite table-loader-hourglass}@keyframes table-loader-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file
+                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #fff;border-color:#fff transparent;animation:1.2s infinite lds-hourglass}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file

From 2d6bb7bd308da2c3faf28be9330ef50fab1ef0e9 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 05:55:24 +0100
Subject: [PATCH 10/36] Adding methods

---
 .../components/includes/loading.blade.php     | 30 +++++++++++++++----
 resources/views/components/table/tr.blade.php | 12 +++++---
 src/Traits/Helpers/LoadingHelpers.php         |  6 ++--
 3 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index 779c2ec4c..48d282e90 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -1,10 +1,30 @@
+@aware(['isTailwind', 'isBootstrap', 'tableName', 'component'])
 @props(['colCount' => 1])
 
-<tr class="w-full text-center hidden h-full place-items-center align-middle" wire:loading.class.remove="hidden">
-    <td  class=" place-items-center	" colspan="{{ $colCount }}">
-        <div class="h-min self-center align-middle">
-            <div class="table-loader-hourglass"></div>
-            <div>Loading...</div>
+@php
+$customAttributes['loader-wrapper'] = ['class' => 'hidden d-none', 'default' => false];
+@endphp
+<tr
+{{
+    $attributes->merge($customAttributes['loader-wrapper'])
+        ->class(['w-full text-center  h-screen place-items-center align-middle' => $isTailwind])
+        ->class(['w-100 text-center  h-100 align-items-center' => $isBootstrap])
+        ->except('default');
+}}
+wire:key="{{ $tableName }}-loader" wire:loading.class.remove="hidden"
+
+ >
+    <td colspan="{{ $colCount }}">
+        <div class="h-min self-center align-middle text-center">
+            <div 
+            {{
+                    $attributes->merge($component->getLoadingPlaceHolderIconAttributes())
+                        ->class(['lds-hourglass' => $isTailwind])
+                        ->class(['lds-hourglass' => $isBootstrap])
+                        ->except('default');
+            }}
+            ></div>
+            <div>{{ $component->getLoadingPlaceholderContent() }}</div>
         </div>
     </td>
 </tr>
diff --git a/resources/views/components/table/tr.blade.php b/resources/views/components/table/tr.blade.php
index 92d1326ea..fba5f1601 100644
--- a/resources/views/components/table/tr.blade.php
+++ b/resources/views/components/table/tr.blade.php
@@ -2,19 +2,23 @@
 @props(['row', 'rowIndex'])
 
 @php
-    $customAttributes = $this->getTrAttributes($row, $rowIndex);
+    $customAttributes = $component->getTrAttributes($row, $rowIndex);
 @endphp
 
 <tr
-    rowpk='{{ $row->{$this->getPrimaryKey()} }}'
+    rowpk='{{ $row->{$component->getPrimaryKey()} }}'
     x-on:dragstart.self="currentlyReorderingStatus && dragStart(event)"
     x-on:drop.prevent="currentlyReorderingStatus && dropEvent(event)"
     x-on:dragover.prevent.throttle.500ms="currentlyReorderingStatus && dragOverEvent(event)"
     x-on:dragleave.prevent.throttle.500ms="currentlyReorderingStatus && dragLeaveEvent(event)"
+    @if($component->hasDisplayLoadingPlaceholder()) 
+    wire:loading.remove
+    @else
     wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
-    id="{{ $tableName }}-row-{{ $row->{$this->getPrimaryKey()} }}"
+    @endif
+    id="{{ $tableName }}-row-{{ $row->{$component->getPrimaryKey()} }}"
     :draggable="currentlyReorderingStatus"
-    wire:key="{{ $tableName }}-tablerow-tr-{{ $row->{$this->getPrimaryKey()} }}"
+    wire:key="{{ $tableName }}-tablerow-tr-{{ $row->{$component->getPrimaryKey()} }}"
     loopType="{{ ($rowIndex % 2 === 0) ? 'even' : 'odd' }}"
     {{
         $attributes->merge($customAttributes)
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index b6977de19..4dc451b85 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -21,7 +21,7 @@ public function hasLoadingPlaceholderContent(): bool
 
     public function getLoadingPlaceholderContent(): string
     {
-        return $this->loadingPlaceholderContent;
+        return $this->loadingPlaceholderContent ?? __('livewire-tables:loading');
     }
 
     public function hasLoadingPlaceholderAttributes(): bool
@@ -34,12 +34,12 @@ public function getLoadingPlaceholderAttributes(): array
         return $this->loadingPlaceHolderAttributes;
     }
 
-    public function hasPlaceHolderIconAttributes(): bool
+    public function hasLoadingPlaceHolderIconAttributes(): bool
     {
         return ! empty($this->getPlaceHolderIconAttributes());
     }
 
-    public function getPlaceHolderIconAttributes(): array
+    public function getLoadingPlaceHolderIconAttributes(): array
     {
         return $this->loadingPlaceHolderIconAttributes;
     }

From a01a2e2277cfada20f22798bdfc69d2646ae53fe Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 05:56:55 +0100
Subject: [PATCH 11/36] LoadingIndicator

---
 resources/views/datatable.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
index 9a07de17c..8a9be32a5 100644
--- a/resources/views/datatable.blade.php
+++ b/resources/views/datatable.blade.php
@@ -34,7 +34,7 @@
             <x-livewire-tables::includes.loading colCount="{{ $this->columns->count()+1 }}" />
             @endif
 
-            <x-livewire-tables::table.tr.bulk-actions :rows="$rows" :displayMinimisedOnReorder="true" />
+            <x-livewire-tables::table.tr.bulk-actions :rows="$rows"  @if($this->hasDisplayLoadingPlaceholder()) :wire:loading.remove @endif :displayMinimisedOnReorder="true" />
 
             @forelse ($rows as $rowIndex => $row)
                 <x-livewire-tables::table.tr wire:key="{{ $tableName }}-row-wrap-{{ $row->{$this->getPrimaryKey()} }}" :row="$row" :rowIndex="$rowIndex">

From 7255493253f759bfbd7b8b765b0cf699cbda3f23 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:02:27 +0100
Subject: [PATCH 12/36] Adjust Loading - BS4/BS5 and TW2/TW3

---
 resources/views/components/includes/loading.blade.php | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index 48d282e90..cc8a5f928 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -3,6 +3,8 @@
 
 @php
 $customAttributes['loader-wrapper'] = ['class' => 'hidden d-none', 'default' => false];
+$customAttributes['loader-icon'] = $component->getLoadingPlaceHolderIconAttributes();
+
 @endphp
 <tr
 {{
@@ -16,11 +18,11 @@
  >
     <td colspan="{{ $colCount }}">
         <div class="h-min self-center align-middle text-center">
-            <div 
+            <div class="lds-hourglass"
             {{
-                    $attributes->merge($component->getLoadingPlaceHolderIconAttributes())
-                        ->class(['lds-hourglass' => $isTailwind])
-                        ->class(['lds-hourglass' => $isBootstrap])
+                    $attributes->merge($customAttributes['loader-icon'])
+                        ->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)])
+                        ->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)])
                         ->except('default');
             }}
             ></div>

From a326966fe431cd2aae38ad6e502630f6f810a74b Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:10:11 +0100
Subject: [PATCH 13/36] Add wrappers

---
 .../components/includes/loading.blade.php     |  2 +-
 .../Configuration/LoadingConfiguration.php    |  7 +++++++
 src/Traits/Helpers/LoadingHelpers.php         | 19 +++++--------------
 src/Traits/WithLoading.php                    |  3 +++
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index cc8a5f928..e222d4a09 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -2,7 +2,7 @@
 @props(['colCount' => 1])
 
 @php
-$customAttributes['loader-wrapper'] = ['class' => 'hidden d-none', 'default' => false];
+$customAttributes['loader-wrapper'] = $component->getLoadingPlaceHolderWrapperAttributes();
 $customAttributes['loader-icon'] = $component->getLoadingPlaceHolderIconAttributes();
 
 @endphp
diff --git a/src/Traits/Configuration/LoadingConfiguration.php b/src/Traits/Configuration/LoadingConfiguration.php
index de348c843..0ee687171 100644
--- a/src/Traits/Configuration/LoadingConfiguration.php
+++ b/src/Traits/Configuration/LoadingConfiguration.php
@@ -45,4 +45,11 @@ public function setLoadingPlaceHolderIconAttributes(array $attributes): self
 
         return $this;
     }
+
+    public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self
+    {
+        $this->loadingPlaceHolderWrapperAttributes = $attributes;
+
+        return $this;
+    }
 }
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 4dc451b85..45c63ec9a 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -14,33 +14,24 @@ public function getDisplayLoadingPlaceholder(): bool
         return $this->displayLoadingPlaceholder;
     }
 
-    public function hasLoadingPlaceholderContent(): bool
-    {
-        return ! is_null($this->getLoadingPlaceholderContent());
-    }
-
     public function getLoadingPlaceholderContent(): string
     {
         return $this->loadingPlaceholderContent ?? __('livewire-tables:loading');
     }
 
-    public function hasLoadingPlaceholderAttributes(): bool
-    {
-        return ! empty($this->getLoadingPlaceholderAttributes());
-    }
-
     public function getLoadingPlaceholderAttributes(): array
     {
         return $this->loadingPlaceHolderAttributes;
     }
 
-    public function hasLoadingPlaceHolderIconAttributes(): bool
+    public function getLoadingPlaceHolderIconAttributes(): array
     {
-        return ! empty($this->getPlaceHolderIconAttributes());
+        return $this->loadingPlaceHolderIconAttributes ?? ['class' => 'lds-hourglass', default => false];
     }
 
-    public function getLoadingPlaceHolderIconAttributes(): array
+    public function getLoadingPlaceHolderWrapperAttributes(): array
     {
-        return $this->loadingPlaceHolderIconAttributes;
+        return $this->loadingPlaceHolderWrapperAttributes ?? ['class' => 'hidden d-none', 'default' => false];
     }
+
 }
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoading.php
index 8b9a6ff23..66e5770b5 100644
--- a/src/Traits/WithLoading.php
+++ b/src/Traits/WithLoading.php
@@ -17,4 +17,7 @@ trait WithLoading
     protected array $loadingPlaceHolderAttributes = [];
 
     protected array $loadingPlaceHolderIconAttributes = [];
+
+    protected array $loadingPlaceHolderWrapperAttributes = [];
+
 }

From e9fa77f6029bf8a151b4a6c0140fa6a62e872732 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:11:09 +0100
Subject: [PATCH 14/36] Fix errant key

---
 src/Traits/Helpers/LoadingHelpers.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 45c63ec9a..5037e4dfe 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -26,7 +26,7 @@ public function getLoadingPlaceholderAttributes(): array
 
     public function getLoadingPlaceHolderIconAttributes(): array
     {
-        return $this->loadingPlaceHolderIconAttributes ?? ['class' => 'lds-hourglass', default => false];
+        return $this->loadingPlaceHolderIconAttributes ?? ['class' => 'lds-hourglass', 'default' => false];
     }
 
     public function getLoadingPlaceHolderWrapperAttributes(): array

From d16dd8f3cd8101a0878abcd446ec99af407cac72 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 05:11:43 +0000
Subject: [PATCH 15/36] Fix styling

---
 src/Traits/Helpers/LoadingHelpers.php | 1 -
 src/Traits/WithLoading.php            | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 5037e4dfe..0e1f991da 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -33,5 +33,4 @@ public function getLoadingPlaceHolderWrapperAttributes(): array
     {
         return $this->loadingPlaceHolderWrapperAttributes ?? ['class' => 'hidden d-none', 'default' => false];
     }
-
 }
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoading.php
index 66e5770b5..4ae0db4b0 100644
--- a/src/Traits/WithLoading.php
+++ b/src/Traits/WithLoading.php
@@ -19,5 +19,4 @@ trait WithLoading
     protected array $loadingPlaceHolderIconAttributes = [];
 
     protected array $loadingPlaceHolderWrapperAttributes = [];
-
 }

From de041bd20591b010950a8dc25bbb3a915709b849 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:17:49 +0100
Subject: [PATCH 16/36] Merging Classes

---
 resources/views/components/includes/loading.blade.php | 10 ++++------
 src/Traits/Helpers/LoadingHelpers.php                 |  4 ++--
 2 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index e222d4a09..06f783824 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -6,15 +6,13 @@
 $customAttributes['loader-icon'] = $component->getLoadingPlaceHolderIconAttributes();
 
 @endphp
-<tr
+<tr wire:key="{{ $tableName }}-loader" class="hidden d-none"
 {{
     $attributes->merge($customAttributes['loader-wrapper'])
-        ->class(['w-full text-center  h-screen place-items-center align-middle' => $isTailwind])
-        ->class(['w-100 text-center  h-100 align-items-center' => $isBootstrap])
-        ->except('default');
+        ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
+        ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
 }}
-wire:key="{{ $tableName }}-loader" wire:loading.class.remove="hidden"
-
+wire:loading.class.remove="hidden"
  >
     <td colspan="{{ $colCount }}">
         <div class="h-min self-center align-middle text-center">
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 0e1f991da..04f6a4df6 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -26,11 +26,11 @@ public function getLoadingPlaceholderAttributes(): array
 
     public function getLoadingPlaceHolderIconAttributes(): array
     {
-        return $this->loadingPlaceHolderIconAttributes ?? ['class' => 'lds-hourglass', 'default' => false];
+        return $this->loadingPlaceHolderIconAttributes ?? ['default' => true];
     }
 
     public function getLoadingPlaceHolderWrapperAttributes(): array
     {
-        return $this->loadingPlaceHolderWrapperAttributes ?? ['class' => 'hidden d-none', 'default' => false];
+        return $this->loadingPlaceHolderWrapperAttributes ?? ['default' => true];
     }
 }

From 07075daba57328911864b9892ac37238419de364 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:27:17 +0100
Subject: [PATCH 17/36] Tweaks for loadingPlaceholderBlade

---
 .../components/includes/loading.blade.php     | 51 ++++++++++---------
 resources/views/datatable.blade.php           |  3 +-
 .../Configuration/LoadingConfiguration.php    |  7 +++
 src/Traits/Helpers/LoadingHelpers.php         | 11 ++++
 src/Traits/WithLoading.php                    |  3 ++
 5 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index 06f783824..207e175e0 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -4,27 +4,32 @@
 @php
 $customAttributes['loader-wrapper'] = $component->getLoadingPlaceHolderWrapperAttributes();
 $customAttributes['loader-icon'] = $component->getLoadingPlaceHolderIconAttributes();
-
 @endphp
-<tr wire:key="{{ $tableName }}-loader" class="hidden d-none"
-{{
-    $attributes->merge($customAttributes['loader-wrapper'])
-        ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
-        ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
-}}
-wire:loading.class.remove="hidden"
- >
-    <td colspan="{{ $colCount }}">
-        <div class="h-min self-center align-middle text-center">
-            <div class="lds-hourglass"
-            {{
-                    $attributes->merge($customAttributes['loader-icon'])
-                        ->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)])
-                        ->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)])
-                        ->except('default');
-            }}
-            ></div>
-            <div>{{ $component->getLoadingPlaceholderContent() }}</div>
-        </div>
-    </td>
-</tr>
+@if($this->hasLoadingPlaceholderBlade())
+    @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
+@else
+
+    <tr wire:key="{{ $tableName }}-loader" class="hidden d-none"
+    {{
+        $attributes->merge($customAttributes['loader-wrapper'])
+            ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
+            ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
+    }}
+    wire:loading.class.remove="hidden"
+    >
+        <td colspan="{{ $colCount }}">
+            <div class="h-min self-center align-middle text-center">
+                <div class="lds-hourglass"
+                {{
+                        $attributes->merge($customAttributes['loader-icon'])
+                            ->class(['lds-hourglass' => $isTailwind && ($customAttributes['loader-icon']['default'] ?? true)])
+                            ->class(['lds-hourglass' => $isBootstrap && ($customAttributes['loader-icon']['default'] ?? true)])
+                            ->except('default');
+                }}
+                ></div>
+                <div>{{ $component->getLoadingPlaceholderContent() }}</div>
+            </div>
+        </td>
+    </tr>
+
+@endif
\ No newline at end of file
diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
index 8a9be32a5..c2e7bd35b 100644
--- a/resources/views/datatable.blade.php
+++ b/resources/views/datatable.blade.php
@@ -31,9 +31,10 @@
                 <x-livewire-tables::table.tr.secondary-header :rows="$rows" />
             @endif
             @if($this->hasDisplayLoadingPlaceholder())
-            <x-livewire-tables::includes.loading colCount="{{ $this->columns->count()+1 }}" />
+                <x-livewire-tables::includes.loading colCount="{{ $this->columns->count()+1 }}" />
             @endif
 
+
             <x-livewire-tables::table.tr.bulk-actions :rows="$rows"  @if($this->hasDisplayLoadingPlaceholder()) :wire:loading.remove @endif :displayMinimisedOnReorder="true" />
 
             @forelse ($rows as $rowIndex => $row)
diff --git a/src/Traits/Configuration/LoadingConfiguration.php b/src/Traits/Configuration/LoadingConfiguration.php
index 0ee687171..ecea3143f 100644
--- a/src/Traits/Configuration/LoadingConfiguration.php
+++ b/src/Traits/Configuration/LoadingConfiguration.php
@@ -52,4 +52,11 @@ public function setLoadingPlaceHolderWrapperAttributes(array $attributes): self
 
         return $this;
     }
+
+    public function setLoadingPlaceholderBlade(string $customBlade): self
+    {
+        $this->loadingPlaceholderBlade = $customBlade;
+
+        return $this;
+    }
 }
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 04f6a4df6..30d4e34e3 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -33,4 +33,15 @@ public function getLoadingPlaceHolderWrapperAttributes(): array
     {
         return $this->loadingPlaceHolderWrapperAttributes ?? ['default' => true];
     }
+
+    public function hasLoadingPlaceholderBlade(): bool
+    {
+        return is_null($this->getLoadingPlaceHolderBlade());
+    }
+
+    public function getLoadingPlaceHolderBlade(): ?string
+    {
+        return $this->loadingPlaceholderBlade;
+    }
+
 }
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoading.php
index 4ae0db4b0..e6bbb5018 100644
--- a/src/Traits/WithLoading.php
+++ b/src/Traits/WithLoading.php
@@ -13,10 +13,13 @@ trait WithLoading
     protected bool $displayLoadingPlaceholder = false;
 
     protected string $loadingPlaceholderContent = 'Loading';
+    
+    protected ?string $loadingPlaceholderBlade = null;
 
     protected array $loadingPlaceHolderAttributes = [];
 
     protected array $loadingPlaceHolderIconAttributes = [];
 
     protected array $loadingPlaceHolderWrapperAttributes = [];
+
 }

From d1fe95e4c7faa3fd2df3101cd66aa404dcfb03c0 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 05:27:46 +0000
Subject: [PATCH 18/36] Fix styling

---
 src/Traits/Helpers/LoadingHelpers.php | 1 -
 src/Traits/WithLoading.php            | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 30d4e34e3..46cb72d10 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -43,5 +43,4 @@ public function getLoadingPlaceHolderBlade(): ?string
     {
         return $this->loadingPlaceholderBlade;
     }
-
 }
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoading.php
index e6bbb5018..c3aa12129 100644
--- a/src/Traits/WithLoading.php
+++ b/src/Traits/WithLoading.php
@@ -13,7 +13,7 @@ trait WithLoading
     protected bool $displayLoadingPlaceholder = false;
 
     protected string $loadingPlaceholderContent = 'Loading';
-    
+
     protected ?string $loadingPlaceholderBlade = null;
 
     protected array $loadingPlaceHolderAttributes = [];
@@ -21,5 +21,4 @@ trait WithLoading
     protected array $loadingPlaceHolderIconAttributes = [];
 
     protected array $loadingPlaceHolderWrapperAttributes = [];
-
 }

From ded0d1871c2ee61768263117727270368017d122 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:30:09 +0100
Subject: [PATCH 19/36] Invert hasLoadingPlaceholderBlade

---
 src/Traits/Helpers/LoadingHelpers.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 46cb72d10..83fec733b 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -36,7 +36,7 @@ public function getLoadingPlaceHolderWrapperAttributes(): array
 
     public function hasLoadingPlaceholderBlade(): bool
     {
-        return is_null($this->getLoadingPlaceHolderBlade());
+        return !is_null($this->getLoadingPlaceHolderBlade());
     }
 
     public function getLoadingPlaceHolderBlade(): ?string

From e98bbbb154a566794960a06c6d865f7308001bca Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 05:30:34 +0000
Subject: [PATCH 20/36] Fix styling

---
 src/Traits/Helpers/LoadingHelpers.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingHelpers.php
index 83fec733b..11c7a8fc1 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingHelpers.php
@@ -36,7 +36,7 @@ public function getLoadingPlaceHolderWrapperAttributes(): array
 
     public function hasLoadingPlaceholderBlade(): bool
     {
-        return !is_null($this->getLoadingPlaceHolderBlade());
+        return ! is_null($this->getLoadingPlaceHolderBlade());
     }
 
     public function getLoadingPlaceHolderBlade(): ?string

From 2aa0d55ef112febd1936e077b39914aeeaf84c52 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:35:58 +0100
Subject: [PATCH 21/36] Adjust loading - bootstrap remove none

---
 resources/views/components/includes/loading.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index 207e175e0..66784d4f4 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -15,7 +15,7 @@
             ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
             ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
     }}
-    wire:loading.class.remove="hidden"
+    wire:loading.class.remove="d-none hidden"
     >
         <td colspan="{{ $colCount }}">
             <div class="h-min self-center align-middle text-center">

From fd755e9a8b5d076a3382392a082499638f625c05 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:38:40 +0100
Subject: [PATCH 22/36] Adjust colors

---
 resources/css/laravel-livewire-tables.css     |   8 +-
 resources/css/laravel-livewire-tables.min.css | 407 +++++++++++++++++-
 2 files changed, 408 insertions(+), 7 deletions(-)

diff --git a/resources/css/laravel-livewire-tables.css b/resources/css/laravel-livewire-tables.css
index c0c0e7f51..77c564573 100644
--- a/resources/css/laravel-livewire-tables.css
+++ b/resources/css/laravel-livewire-tables.css
@@ -377,10 +377,16 @@ label[dir=rtl] .range-slider {
     height: 0;
     margin: 8px;
     box-sizing: border-box;
-    border: 32px solid #fff;
+    border: 32px solid #000;
     border-color: #fff transparent #fff transparent;
     animation: lds-hourglass 1.2s infinite;
   }
+  .dark .lds-hourglass:after {
+    border: 32px solid #FFF;
+
+  }
+
+
   @keyframes lds-hourglass {
     0% {
       transform: rotate(0);
diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index b07265545..77c564573 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -1,7 +1,402 @@
-.laravel-livewire-tables-highlight{border-style:solid!important;border-top-width:2px!important;border-bottom-width:2px!important;border-color:var(--rappasoft-table-highlight-color,rgb(255 255 255))!important}.laravel-livewire-tables-highlight-top{border-style:solid!important;border-top-width:2px!important;border-bottom-width:0!important;border-color:var(--rappasoft-table-top-highlight-color,var(--rappasoft-table-highlight-color,rgb(255 255 255)))!important}.laravel-livewire-tables-highlight-bottom{border-style:solid!important;border-top-width:0!important;border-bottom-width:2px!important;border-color:var(--rappasoft-table-bottom-highlight-color,var(--rappasoft-table-highlight-color,rgb(255 255 255)))!important}.laravel-livewire-tables-reorderingMinimised{width:0}.laravel-livewire-table-dragging{opacity:.5!important}.range-slider.grad{--progress-shadow:2px 2px 4px rgba(0, 0, 0, 0.2) inset;--progress-flll-shadow:var(--progress-shadow);--fill-color:linear-gradient(to right, LightCyan, var(--primary-color, #0366d6));--thumb-shadow:0 0 4px rgba(0, 0, 0, 0.3),-3px 9px 9px rgba(255, 241, 241, 0.33) inset,-1px 3px 2px rgba(255, 255, 255, 0.33) inset,0 0 0 99px var(--primary-color, #0366d6) inset}.range-slider.grad input:hover{--thumb-transform:scale(1.2)}.range-slider.grad input:active{--thumb-shadow:inherit;--thumb-transform:scale(1)}.range-slider.flat{--thumb-size:25px;--track-height:calc(var(--thumb-size) / 3);--progress-shadow:none;--progress-flll-shadow:none;--thumb-shadow:0 0 0 7px var(--primary-color, #0366d6) inset,0 0 0 99px white inset;--thumb-shadow-hover:0 0 0 9px var(--primary-color, #0366d6) inset,0 0 0 99px white inset;--thumb-shadow-active:0 0 0 13px var(--primary-color, #0366d6) inset}.range-slider{--value-offset-y:var(--ticks-gap);--value-background:transparent;--value-font:700 12px/1 Arial;--progress-radius:20px;--track-height:calc(var(--thumb-size) / 2);--min-max-opacity:1;--min-max-x-offset:10%;--thumb-size:22px;--thumb-shadow:0 0 3px rgba(0, 0, 0, 0.4),0 0 1px rgba(0, 0, 0, 0.5) inset,0 0 0 99px var(--thumb-color, white) inset;--thumb-shadow-active:0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color, white),0 0 0 99px var(--primary-color, #0366d6) inset,0 0 3px rgba(0, 0, 0, 0.4);--thumb-shadow-hover:var(--thumb-shadow);--ticks-thickness:1px;--ticks-height:5px;--ticks-gap:var(--ticks-height,
-            0);--step:1;--ticks-count:Calc(var(--max) - var(--min))/var(--step);--maxTicksAllowed:30;--too-many-ticks:Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));--x-step:Max(var(--step),
-            var(--too-many-ticks) * (var(--max) - var(--min)));--tickInterval:100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);--tickIntervalPerc:calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1));--value-a:Clamp(var(--min),
+.laravel-livewire-tables-highlight {
+    border-style: solid !important;
+    border-top-width: 2px !important;
+    border-bottom-width: 2px !important;
+    border-color: var(--rappasoft-table-highlight-color, rgb(255 255 255)) !important;
+}
+
+
+
+
+
+.laravel-livewire-tables-highlight-top {
+    border-style: solid !important;
+    border-top-width: 2px !important;
+    border-bottom-width: 0px !important;
+    border-color: var(--rappasoft-table-top-highlight-color, var(--rappasoft-table-highlight-color, rgb(255 255 255))) !important;
+}
+
+.laravel-livewire-tables-highlight-bottom {
+    border-style: solid !important;
+    border-top-width: 0px !important;
+    border-bottom-width: 2px !important;
+    border-color: var(--rappasoft-table-bottom-highlight-color, var(--rappasoft-table-highlight-color, rgb(255 255 255))) !important;
+}
+
+.laravel-livewire-tables-reorderingMinimised {
+    width: 0px;
+}
+
+
+.laravel-livewire-table-dragging {
+    opacity: 0.5 !important;
+}
+
+.range-slider.grad {
+    --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;
+    --progress-flll-shadow: var(--progress-shadow);
+    --fill-color: linear-gradient(to right, LightCyan, var(--primary-color, #0366d6));
+    --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3),
+        -3px 9px 9px rgba(255, 241, 241, 0.33) inset,
+        -1px 3px 2px rgba(255, 255, 255, 0.33) inset,
+        0 0 0 99px var(--primary-color, #0366d6) inset;
+}
+
+.range-slider.grad input:hover {
+    --thumb-transform: scale(1.2);
+}
+
+.range-slider.grad input:active {
+    --thumb-shadow: inherit;
+    --thumb-transform: scale(1);
+}
+
+.range-slider.flat {
+    --thumb-size: 25px;
+    --track-height: calc(var(--thumb-size) / 3);
+    --progress-shadow: none;
+    --progress-flll-shadow: none;
+    --thumb-shadow: 0 0 0 7px var(--primary-color, #0366d6) inset, 0 0 0 99px white inset;
+    --thumb-shadow-hover: 0 0 0 9px var(--primary-color, #0366d6) inset,
+        0 0 0 99px white inset;
+    --thumb-shadow-active: 0 0 0 13px var(--primary-color, #0366d6) inset;
+}
+
+.range-slider {
+    --value-offset-y: var(--ticks-gap);
+    --value-background: transparent;
+    --value-font: 700 12px/1 Arial;
+    --progress-radius: 20px;
+    --track-height: calc(var(--thumb-size) / 2);
+    --min-max-opacity: 1;
+    --min-max-x-offset: 10%;
+    --thumb-size: 22px;
+    --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4),
+        0 0 1px rgba(0, 0, 0, 0.5) inset,
+        0 0 0 99px var(--thumb-color, white) inset;
+    --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color, white),
+        0 0 0 99px var(--primary-color, #0366d6) inset,
+        0 0 3px rgba(0, 0, 0, 0.4);
+    --thumb-shadow-hover: var(--thumb-shadow);
+    --ticks-thickness: 1px;
+    --ticks-height: 5px;
+    --ticks-gap: var(--ticks-height,
+            0);
+    --step: 1;
+    --ticks-count: Calc(var(--max) - var(--min)) / var(--step);
+    --maxTicksAllowed: 30;
+    --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
+    --x-step: Max(var(--step),
+            var(--too-many-ticks) * (var(--max) - var(--min)));
+    --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
+    --tickIntervalPerc: calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1));
+    --value-a: Clamp(var(--min),
             var(--value, 0),
-            var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a),
-            var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2,
-                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #fff;border-color:#fff transparent;animation:1.2s infinite lds-hourglass}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file
+            var(--max));
+    --value-b: var(--value, 0);
+    --text-value-a: var(--text-value, "");
+    --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);
+    --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);
+    --ca: Min(var(--completed-a),
+            var(--completed-b));
+    --cb: Max(var(--completed-a), var(--completed-b));
+    --thumbs-too-close: Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);
+    --thumb-close-to-min: Min(1, Max(var(--ca) - 2,
+                0));
+    --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
+    display: inline-block;
+    height: max(var(--track-height), var(--thumb-size));
+    background: linear-gradient(to right, var(--ticks-color, silver) var(--ticks-thickness), transparent 1px) repeat-x;
+    background-size: var(--tickIntervalPerc) var(--ticks-height);
+    background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2);
+    background-position-y: var(--flip-y, bottom);
+    padding-bottom: var(--flip-y, var(--ticks-gap));
+    padding-top: calc(var(--flip-y) * var(--ticks-gap));
+    position: relative;
+    z-index: 1;
+}
+
+.range-slider::before,
+.range-slider::after {
+    --offset: calc(var(--thumb-size) / 2);
+    content: counter(x);
+    display: var(--show-min-max, block);
+    font: var(--min-max-font, 12px Arial);
+    position: absolute;
+    bottom: var(--flip-y, -2.5ch);
+    top: calc(-2.5ch * var(--flip-y));
+    opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
+    transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
+    pointer-events: none;
+}
+
+.dark .range-slider::before,
+.dark .range-slider::after {
+    color: #FFF;
+}
+
+.range-slider::before {
+    --before: 1;
+    --at-edge: var(--thumb-close-to-min);
+    counter-reset: x var(--min);
+    left: var(--offset);
+}
+
+.range-slider::after {
+    --at-edge: var(--thumb-close-to-max);
+    counter-reset: x var(--max);
+    right: var(--offset);
+}
+
+.range-slider__values {
+    position: relative;
+    top: 50%;
+    line-height: 0;
+    text-align: justify;
+    width: 100%;
+    pointer-events: none;
+    margin: 0 auto;
+    z-index: 5;
+}
+
+.range-slider__values::after {
+    content: "";
+    width: 100%;
+    display: inline-block;
+    height: 0;
+    background: red;
+}
+
+.range-slider__progress {
+    --start-end: calc(var(--thumb-size) / 2);
+    --clip-end: calc(100% - (var(--cb)) * 1%);
+    --clip-start: calc(var(--ca) * 1%);
+    --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
+    position: absolute;
+    left: var(--start-end);
+    right: var(--start-end);
+    top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2);
+    height: calc(var(--track-height));
+    background: var(--progress-background, #eee);
+    pointer-events: none;
+    z-index: -1;
+    border-radius: var(--progress-radius);
+}
+
+.range-slider__progress::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    -webkit-clip-path: var(--clip);
+    clip-path: var(--clip);
+    top: 0;
+    bottom: 0;
+    background: var(--fill-color, #0366d6);
+    box-shadow: var(--progress-flll-shadow);
+    z-index: 1;
+    border-radius: inherit;
+}
+
+.range-slider__progress::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-shadow: var(--progress-shadow);
+    pointer-events: none;
+    border-radius: inherit;
+}
+
+.range-slider>input {
+    -webkit-appearance: none;
+    width: 100%;
+    height: var(--thumb-size);
+    margin: 0;
+    position: absolute;
+    left: 0;
+    top: calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y,
+                    -1)));
+    cursor: -webkit-grab;
+    cursor: grab;
+    outline: none;
+    background: none;
+}
+
+.range-slider>input:not(:only-of-type) {
+    pointer-events: none;
+}
+
+.range-slider>input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    transform: var(--thumb-transform);
+    border-radius: var(--thumb-radius, 50%);
+    background: var(--thumb-color, white);
+    box-shadow: var(--thumb-shadow);
+    border: none;
+    pointer-events: auto;
+    -webkit-transition: 0.1s;
+    transition: 0.1s;
+}
+
+.range-slider>input::-moz-range-thumb {
+    -moz-appearance: none;
+    appearance: none;
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    transform: var(--thumb-transform);
+    border-radius: var(--thumb-radius, 50%);
+    background: var(--thumb-color, white);
+    box-shadow: var(--thumb-shadow);
+    border: none;
+    pointer-events: auto;
+    -moz-transition: 0.1s;
+    transition: 0.1s;
+}
+
+.range-slider>input::-ms-thumb {
+    appearance: none;
+    height: var(--thumb-size);
+    width: var(--thumb-size);
+    transform: var(--thumb-transform);
+    border-radius: var(--thumb-radius, 50%);
+    background: var(--thumb-color, white);
+    box-shadow: var(--thumb-shadow);
+    border: none;
+    pointer-events: auto;
+    -ms-transition: 0.1s;
+    transition: 0.1s;
+}
+
+.range-slider>input:hover {
+    --thumb-shadow: var(--thumb-shadow-hover);
+}
+
+.range-slider>input:hover+output {
+    --value-background: var(--value-background-hover, #0366d6);
+    --y-offset: -5px;
+    color: var(--value-active-color, #FFFFFF);
+    box-shadow: 0 0 0 3px var(--value-background);
+}
+
+.range-slider>input:active {
+    --thumb-shadow: var(--thumb-shadow-active);
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+    z-index: 2;
+}
+
+.range-slider>input:active+output {
+    transition: 0s;
+}
+
+.range-slider>input:nth-of-type(1) {
+    --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);
+}
+
+.range-slider>input:nth-of-type(1)+output {
+    --value: var(--value-a);
+    --x-offset: calc(var(--completed-a) * -1%);
+}
+
+.range-slider>input:nth-of-type(1)+output:not(:only-of-type) {
+    --flip: calc(var(--thumbs-too-close) * -1);
+}
+
+.range-slider>input:nth-of-type(1)+output::after {
+    content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
+}
+
+.dark .range-slider>input:nth-of-type(1)+output::after {
+    color: #FFF;
+}
+
+.range-slider>input:nth-of-type(2) {
+    --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);
+}
+
+.range-slider>input:nth-of-type(2)+output {
+    --value: var(--value-b);
+}
+
+.range-slider>input:only-of-type~.range-slider__progress {
+    --clip-start: 0;
+}
+
+.range-slider>input+output {
+    --flip: -1;
+    --x-offset: calc(var(--completed-b) * -1%);
+    --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
+    pointer-events: none;
+    position: absolute;
+    z-index: 5;
+    background: var(--value-background);
+    border-radius: 10px;
+    padding: 2px 4px;
+    left: var(--pos);
+    transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
+    transition: all 0.12s ease-out, left 0s;
+}
+
+.range-slider>input+output::after {
+    content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
+    font: var(--value-font);
+}
+
+.dark .range-slider>input+output::after {
+    color: #FFF;
+}
+
+
+body>.range-slider,
+label[dir=rtl] .range-slider {
+    width: clamp(300px, 50vw, 800px);
+    min-width: 200px;
+}
+
+.superhide {
+    display: none;
+}
+
+.lds-hourglass {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-hourglass:after {
+    content: " ";
+    display: block;
+    border-radius: 50%;
+    width: 0;
+    height: 0;
+    margin: 8px;
+    box-sizing: border-box;
+    border: 32px solid #000;
+    border-color: #fff transparent #fff transparent;
+    animation: lds-hourglass 1.2s infinite;
+  }
+  .dark .lds-hourglass:after {
+    border: 32px solid #FFF;
+
+  }
+
+
+  @keyframes lds-hourglass {
+    0% {
+      transform: rotate(0);
+      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    }
+    50% {
+      transform: rotate(900deg);
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    100% {
+      transform: rotate(1800deg);
+    }
+  }
\ No newline at end of file

From b18906de33b5adb73a5359cd9c09c6a2b006b244 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:42:08 +0100
Subject: [PATCH 23/36] Colouring

---
 resources/css/laravel-livewire-tables.min.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index 77c564573..afcf1876b 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -378,13 +378,9 @@ label[dir=rtl] .range-slider {
     margin: 8px;
     box-sizing: border-box;
     border: 32px solid #000;
-    border-color: #fff transparent #fff transparent;
+    border-color: #000 transparent;
     animation: lds-hourglass 1.2s infinite;
   }
-  .dark .lds-hourglass:after {
-    border: 32px solid #FFF;
-
-  }
 
 
   @keyframes lds-hourglass {

From b368d50d1523fbdec09cf7657ac3d38763358f5a Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:44:45 +0100
Subject: [PATCH 24/36] Updates

---
 resources/css/laravel-livewire-tables.min.css | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index afcf1876b..83497a495 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -378,9 +378,14 @@ label[dir=rtl] .range-slider {
     margin: 8px;
     box-sizing: border-box;
     border: 32px solid #000;
-    border-color: #000 transparent;
+    border-color: #000 transparent #fff transparent;
     animation: lds-hourglass 1.2s infinite;
   }
+  .dark .lds-hourglass:after {
+    border: 32px solid #FFF;
+    border-color: #FFF transparent #000 transparent;
+
+  }
 
 
   @keyframes lds-hourglass {

From 92f66c32a13e66534ded2aed3fa6030a6969c9cc Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 06:53:15 +0100
Subject: [PATCH 25/36] Adding initial docs

---
 CHANGELOG.md              |  5 +++
 docs/datatable/loaders.md | 80 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 docs/datatable/loaders.md

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 56875d62e..6e2869cb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
+## [3.0.0-beta.4] - 2023-10-15
+- Introduction of Loading Placeholder
+- Docs livewire namespace fix [Here](https://github.com/rappasoft/laravel-livewire-tables/pull/1420)
+- Add CollapseAlways capability
+
 ## [3.0.0-beta.3] - 2023-10-13
 - Fix for Livewire ^3.0.6 where the table loading causes an additional lifecycle
 - Add unminified files to .gitattributes export-ignore
diff --git a/docs/datatable/loaders.md b/docs/datatable/loaders.md
new file mode 100644
index 000000000..a18c7b77e
--- /dev/null
+++ b/docs/datatable/loaders.md
@@ -0,0 +1,80 @@
+---
+title: Loaders
+weight: 4
+---
+
+With the introduction of Livewire 3, there are several new methods available for use:
+
+## Loading Placeholder
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderBlade('');
+}
+```
+
+### setLoadingPlaceholderStatus
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderStatus(true);
+}
+```
+
+### setLoadingPlaceholderEnabled
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderEnabled();
+}
+```
+
+
+### setLoadingPlaceholderDisabled
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderDisabled();
+}
+```
+
+### setLoadingPlaceholderContent
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderContent('');
+}
+```
+
+### setLoadingPlaceHolderAttributes
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceHolderAttributes([]);
+}
+```
+
+### setLoadingPlaceHolderIconAttributes
+```php
+public function configure(): void
+{
+  $this->setLoadingPlacehosetLoadingPlaceHolderIconAttributeslderBlade([]);
+}
+```
+
+### setLoadingPlaceHolderWrapperAttributes
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceHolderWrapperAttributes([]);
+}
+```
+
+
+### setLoadingPlaceholderBlade
+```php
+public function configure(): void
+{
+  $this->setLoadingPlaceholderBlade('');
+}
+```

From ce512f25eef46bfe62f133adc0c896f9f272032f Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 07:01:13 +0100
Subject: [PATCH 26/36] Fix bulk actions -> placeholder

---
 resources/views/datatable.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/datatable.blade.php b/resources/views/datatable.blade.php
index c2e7bd35b..36f2de741 100644
--- a/resources/views/datatable.blade.php
+++ b/resources/views/datatable.blade.php
@@ -35,7 +35,7 @@
             @endif
 
 
-            <x-livewire-tables::table.tr.bulk-actions :rows="$rows"  @if($this->hasDisplayLoadingPlaceholder()) :wire:loading.remove @endif :displayMinimisedOnReorder="true" />
+            <x-livewire-tables::table.tr.bulk-actions :rows="$rows" :displayMinimisedOnReorder="true" />
 
             @forelse ($rows as $rowIndex => $row)
                 <x-livewire-tables::table.tr wire:key="{{ $tableName }}-row-wrap-{{ $row->{$this->getPrimaryKey()} }}" :row="$row" :rowIndex="$rowIndex">

From ae7a8735b38a58334c6993aa1c35ffa4fe4ec8f3 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Sun, 15 Oct 2023 08:13:09 +0100
Subject: [PATCH 27/36] In-Line Fixes

---
 resources/css/laravel-livewire-tables.min.css | 408 +-----------------
 .../components/includes/loading.blade.php     |   4 +-
 2 files changed, 8 insertions(+), 404 deletions(-)

diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css
index 83497a495..bf77392cc 100644
--- a/resources/css/laravel-livewire-tables.min.css
+++ b/resources/css/laravel-livewire-tables.min.css
@@ -1,403 +1,7 @@
-.laravel-livewire-tables-highlight {
-    border-style: solid !important;
-    border-top-width: 2px !important;
-    border-bottom-width: 2px !important;
-    border-color: var(--rappasoft-table-highlight-color, rgb(255 255 255)) !important;
-}
-
-
-
-
-
-.laravel-livewire-tables-highlight-top {
-    border-style: solid !important;
-    border-top-width: 2px !important;
-    border-bottom-width: 0px !important;
-    border-color: var(--rappasoft-table-top-highlight-color, var(--rappasoft-table-highlight-color, rgb(255 255 255))) !important;
-}
-
-.laravel-livewire-tables-highlight-bottom {
-    border-style: solid !important;
-    border-top-width: 0px !important;
-    border-bottom-width: 2px !important;
-    border-color: var(--rappasoft-table-bottom-highlight-color, var(--rappasoft-table-highlight-color, rgb(255 255 255))) !important;
-}
-
-.laravel-livewire-tables-reorderingMinimised {
-    width: 0px;
-}
-
-
-.laravel-livewire-table-dragging {
-    opacity: 0.5 !important;
-}
-
-.range-slider.grad {
-    --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset;
-    --progress-flll-shadow: var(--progress-shadow);
-    --fill-color: linear-gradient(to right, LightCyan, var(--primary-color, #0366d6));
-    --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3),
-        -3px 9px 9px rgba(255, 241, 241, 0.33) inset,
-        -1px 3px 2px rgba(255, 255, 255, 0.33) inset,
-        0 0 0 99px var(--primary-color, #0366d6) inset;
-}
-
-.range-slider.grad input:hover {
-    --thumb-transform: scale(1.2);
-}
-
-.range-slider.grad input:active {
-    --thumb-shadow: inherit;
-    --thumb-transform: scale(1);
-}
-
-.range-slider.flat {
-    --thumb-size: 25px;
-    --track-height: calc(var(--thumb-size) / 3);
-    --progress-shadow: none;
-    --progress-flll-shadow: none;
-    --thumb-shadow: 0 0 0 7px var(--primary-color, #0366d6) inset, 0 0 0 99px white inset;
-    --thumb-shadow-hover: 0 0 0 9px var(--primary-color, #0366d6) inset,
-        0 0 0 99px white inset;
-    --thumb-shadow-active: 0 0 0 13px var(--primary-color, #0366d6) inset;
-}
-
-.range-slider {
-    --value-offset-y: var(--ticks-gap);
-    --value-background: transparent;
-    --value-font: 700 12px/1 Arial;
-    --progress-radius: 20px;
-    --track-height: calc(var(--thumb-size) / 2);
-    --min-max-opacity: 1;
-    --min-max-x-offset: 10%;
-    --thumb-size: 22px;
-    --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4),
-        0 0 1px rgba(0, 0, 0, 0.5) inset,
-        0 0 0 99px var(--thumb-color, white) inset;
-    --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color, white),
-        0 0 0 99px var(--primary-color, #0366d6) inset,
-        0 0 3px rgba(0, 0, 0, 0.4);
-    --thumb-shadow-hover: var(--thumb-shadow);
-    --ticks-thickness: 1px;
-    --ticks-height: 5px;
-    --ticks-gap: var(--ticks-height,
-            0);
-    --step: 1;
-    --ticks-count: Calc(var(--max) - var(--min)) / var(--step);
-    --maxTicksAllowed: 30;
-    --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
-    --x-step: Max(var(--step),
-            var(--too-many-ticks) * (var(--max) - var(--min)));
-    --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
-    --tickIntervalPerc: calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1));
-    --value-a: Clamp(var(--min),
+.laravel-livewire-tables-highlight{border-style:solid!important;border-top-width:2px!important;border-bottom-width:2px!important;border-color:var(--rappasoft-table-highlight-color,rgb(255 255 255))!important}.laravel-livewire-tables-highlight-top{border-style:solid!important;border-top-width:2px!important;border-bottom-width:0!important;border-color:var(--rappasoft-table-top-highlight-color,var(--rappasoft-table-highlight-color,rgb(255 255 255)))!important}.laravel-livewire-tables-highlight-bottom{border-style:solid!important;border-top-width:0!important;border-bottom-width:2px!important;border-color:var(--rappasoft-table-bottom-highlight-color,var(--rappasoft-table-highlight-color,rgb(255 255 255)))!important}.laravel-livewire-tables-reorderingMinimised{width:0}.laravel-livewire-table-dragging{opacity:.5!important}.range-slider.grad{--progress-shadow:2px 2px 4px rgba(0, 0, 0, 0.2) inset;--progress-flll-shadow:var(--progress-shadow);--fill-color:linear-gradient(to right, LightCyan, var(--primary-color, #0366d6));--thumb-shadow:0 0 4px rgba(0, 0, 0, 0.3),-3px 9px 9px rgba(255, 241, 241, 0.33) inset,-1px 3px 2px rgba(255, 255, 255, 0.33) inset,0 0 0 99px var(--primary-color, #0366d6) inset}.range-slider.grad input:hover{--thumb-transform:scale(1.2)}.range-slider.grad input:active{--thumb-shadow:inherit;--thumb-transform:scale(1)}.range-slider.flat{--thumb-size:25px;--track-height:calc(var(--thumb-size) / 3);--progress-shadow:none;--progress-flll-shadow:none;--thumb-shadow:0 0 0 7px var(--primary-color, #0366d6) inset,0 0 0 99px white inset;--thumb-shadow-hover:0 0 0 9px var(--primary-color, #0366d6) inset,0 0 0 99px white inset;--thumb-shadow-active:0 0 0 13px var(--primary-color, #0366d6) inset}.range-slider{--value-offset-y:var(--ticks-gap);--value-background:transparent;--value-font:700 12px/1 Arial;--progress-radius:20px;--track-height:calc(var(--thumb-size) / 2);--min-max-opacity:1;--min-max-x-offset:10%;--thumb-size:22px;--thumb-shadow:0 0 3px rgba(0, 0, 0, 0.4),0 0 1px rgba(0, 0, 0, 0.5) inset,0 0 0 99px var(--thumb-color, white) inset;--thumb-shadow-active:0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color, white),0 0 0 99px var(--primary-color, #0366d6) inset,0 0 3px rgba(0, 0, 0, 0.4);--thumb-shadow-hover:var(--thumb-shadow);--ticks-thickness:1px;--ticks-height:5px;--ticks-gap:var(--ticks-height,
+            0);--step:1;--ticks-count:Calc(var(--max) - var(--min))/var(--step);--maxTicksAllowed:30;--too-many-ticks:Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));--x-step:Max(var(--step),
+            var(--too-many-ticks) * (var(--max) - var(--min)));--tickInterval:100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);--tickIntervalPerc:calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1));--value-a:Clamp(var(--min),
             var(--value, 0),
-            var(--max));
-    --value-b: var(--value, 0);
-    --text-value-a: var(--text-value, "");
-    --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);
-    --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);
-    --ca: Min(var(--completed-a),
-            var(--completed-b));
-    --cb: Max(var(--completed-a), var(--completed-b));
-    --thumbs-too-close: Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);
-    --thumb-close-to-min: Min(1, Max(var(--ca) - 2,
-                0));
-    --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
-    display: inline-block;
-    height: max(var(--track-height), var(--thumb-size));
-    background: linear-gradient(to right, var(--ticks-color, silver) var(--ticks-thickness), transparent 1px) repeat-x;
-    background-size: var(--tickIntervalPerc) var(--ticks-height);
-    background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2);
-    background-position-y: var(--flip-y, bottom);
-    padding-bottom: var(--flip-y, var(--ticks-gap));
-    padding-top: calc(var(--flip-y) * var(--ticks-gap));
-    position: relative;
-    z-index: 1;
-}
-
-.range-slider::before,
-.range-slider::after {
-    --offset: calc(var(--thumb-size) / 2);
-    content: counter(x);
-    display: var(--show-min-max, block);
-    font: var(--min-max-font, 12px Arial);
-    position: absolute;
-    bottom: var(--flip-y, -2.5ch);
-    top: calc(-2.5ch * var(--flip-y));
-    opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
-    transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
-    pointer-events: none;
-}
-
-.dark .range-slider::before,
-.dark .range-slider::after {
-    color: #FFF;
-}
-
-.range-slider::before {
-    --before: 1;
-    --at-edge: var(--thumb-close-to-min);
-    counter-reset: x var(--min);
-    left: var(--offset);
-}
-
-.range-slider::after {
-    --at-edge: var(--thumb-close-to-max);
-    counter-reset: x var(--max);
-    right: var(--offset);
-}
-
-.range-slider__values {
-    position: relative;
-    top: 50%;
-    line-height: 0;
-    text-align: justify;
-    width: 100%;
-    pointer-events: none;
-    margin: 0 auto;
-    z-index: 5;
-}
-
-.range-slider__values::after {
-    content: "";
-    width: 100%;
-    display: inline-block;
-    height: 0;
-    background: red;
-}
-
-.range-slider__progress {
-    --start-end: calc(var(--thumb-size) / 2);
-    --clip-end: calc(100% - (var(--cb)) * 1%);
-    --clip-start: calc(var(--ca) * 1%);
-    --clip: inset(-20px var(--clip-end) -20px var(--clip-start));
-    position: absolute;
-    left: var(--start-end);
-    right: var(--start-end);
-    top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2);
-    height: calc(var(--track-height));
-    background: var(--progress-background, #eee);
-    pointer-events: none;
-    z-index: -1;
-    border-radius: var(--progress-radius);
-}
-
-.range-slider__progress::before {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    -webkit-clip-path: var(--clip);
-    clip-path: var(--clip);
-    top: 0;
-    bottom: 0;
-    background: var(--fill-color, #0366d6);
-    box-shadow: var(--progress-flll-shadow);
-    z-index: 1;
-    border-radius: inherit;
-}
-
-.range-slider__progress::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    box-shadow: var(--progress-shadow);
-    pointer-events: none;
-    border-radius: inherit;
-}
-
-.range-slider>input {
-    -webkit-appearance: none;
-    width: 100%;
-    height: var(--thumb-size);
-    margin: 0;
-    position: absolute;
-    left: 0;
-    top: calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y,
-                    -1)));
-    cursor: -webkit-grab;
-    cursor: grab;
-    outline: none;
-    background: none;
-}
-
-.range-slider>input:not(:only-of-type) {
-    pointer-events: none;
-}
-
-.range-slider>input::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    transform: var(--thumb-transform);
-    border-radius: var(--thumb-radius, 50%);
-    background: var(--thumb-color, white);
-    box-shadow: var(--thumb-shadow);
-    border: none;
-    pointer-events: auto;
-    -webkit-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.range-slider>input::-moz-range-thumb {
-    -moz-appearance: none;
-    appearance: none;
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    transform: var(--thumb-transform);
-    border-radius: var(--thumb-radius, 50%);
-    background: var(--thumb-color, white);
-    box-shadow: var(--thumb-shadow);
-    border: none;
-    pointer-events: auto;
-    -moz-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.range-slider>input::-ms-thumb {
-    appearance: none;
-    height: var(--thumb-size);
-    width: var(--thumb-size);
-    transform: var(--thumb-transform);
-    border-radius: var(--thumb-radius, 50%);
-    background: var(--thumb-color, white);
-    box-shadow: var(--thumb-shadow);
-    border: none;
-    pointer-events: auto;
-    -ms-transition: 0.1s;
-    transition: 0.1s;
-}
-
-.range-slider>input:hover {
-    --thumb-shadow: var(--thumb-shadow-hover);
-}
-
-.range-slider>input:hover+output {
-    --value-background: var(--value-background-hover, #0366d6);
-    --y-offset: -5px;
-    color: var(--value-active-color, #FFFFFF);
-    box-shadow: 0 0 0 3px var(--value-background);
-}
-
-.range-slider>input:active {
-    --thumb-shadow: var(--thumb-shadow-active);
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-    z-index: 2;
-}
-
-.range-slider>input:active+output {
-    transition: 0s;
-}
-
-.range-slider>input:nth-of-type(1) {
-    --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);
-}
-
-.range-slider>input:nth-of-type(1)+output {
-    --value: var(--value-a);
-    --x-offset: calc(var(--completed-a) * -1%);
-}
-
-.range-slider>input:nth-of-type(1)+output:not(:only-of-type) {
-    --flip: calc(var(--thumbs-too-close) * -1);
-}
-
-.range-slider>input:nth-of-type(1)+output::after {
-    content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
-}
-
-.dark .range-slider>input:nth-of-type(1)+output::after {
-    color: #FFF;
-}
-
-.range-slider>input:nth-of-type(2) {
-    --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);
-}
-
-.range-slider>input:nth-of-type(2)+output {
-    --value: var(--value-b);
-}
-
-.range-slider>input:only-of-type~.range-slider__progress {
-    --clip-start: 0;
-}
-
-.range-slider>input+output {
-    --flip: -1;
-    --x-offset: calc(var(--completed-b) * -1%);
-    --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);
-    pointer-events: none;
-    position: absolute;
-    z-index: 5;
-    background: var(--value-background);
-    border-radius: 10px;
-    padding: 2px 4px;
-    left: var(--pos);
-    transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)));
-    transition: all 0.12s ease-out, left 0s;
-}
-
-.range-slider>input+output::after {
-    content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
-    font: var(--value-font);
-}
-
-.dark .range-slider>input+output::after {
-    color: #FFF;
-}
-
-
-body>.range-slider,
-label[dir=rtl] .range-slider {
-    width: clamp(300px, 50vw, 800px);
-    min-width: 200px;
-}
-
-.superhide {
-    display: none;
-}
-
-.lds-hourglass {
-    display: inline-block;
-    position: relative;
-    width: 80px;
-    height: 80px;
-  }
-  .lds-hourglass:after {
-    content: " ";
-    display: block;
-    border-radius: 50%;
-    width: 0;
-    height: 0;
-    margin: 8px;
-    box-sizing: border-box;
-    border: 32px solid #000;
-    border-color: #000 transparent #fff transparent;
-    animation: lds-hourglass 1.2s infinite;
-  }
-  .dark .lds-hourglass:after {
-    border: 32px solid #FFF;
-    border-color: #FFF transparent #000 transparent;
-
-  }
-
-
-  @keyframes lds-hourglass {
-    0% {
-      transform: rotate(0);
-      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-    }
-    50% {
-      transform: rotate(900deg);
-      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    }
-    100% {
-      transform: rotate(1800deg);
-    }
-  }
\ No newline at end of file
+            var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a),
+            var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2,
+                0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;--at-edge:var(--thumb-close-to-min);counter-reset:x var(--min);left:var(--offset)}.range-slider::after{--at-edge:var(--thumb-close-to-max);counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #000;border-color:#000 transparent #fff;animation:1.2s infinite lds-hourglass}.dark .lds-hourglass:after{border:32px solid #fff;border-color:#fff transparent #000}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}}
\ No newline at end of file
diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
index 66784d4f4..7c71772ed 100644
--- a/resources/views/components/includes/loading.blade.php
+++ b/resources/views/components/includes/loading.blade.php
@@ -15,7 +15,7 @@
             ->class(['w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
             ->class(['w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
     }}
-    wire:loading.class.remove="d-none hidden"
+    wire:loading.class.remove="hidden d-none"
     >
         <td colspan="{{ $colCount }}">
             <div class="h-min self-center align-middle text-center">
@@ -32,4 +32,4 @@
         </td>
     </tr>
 
-@endif
\ No newline at end of file
+@endif

From a22c6689a32ca18867cee098b4dd4d3b29e0f1f9 Mon Sep 17 00:00:00 2001
From: Joe <104938042+lrljoe@users.noreply.github.com>
Date: Tue, 17 Oct 2023 18:17:41 +0100
Subject: [PATCH 28/36] Add Basic Tests for Loading Placeholder

---
 .../LoadingConfigurationTest.php              | 35 +++++++++++++++++++
 tests/Traits/Helpers/LoadingHelpersTest.php   | 23 ++++++++++++
 2 files changed, 58 insertions(+)
 create mode 100644 tests/Traits/Configuration/LoadingConfigurationTest.php
 create mode 100644 tests/Traits/Helpers/LoadingHelpersTest.php

diff --git a/tests/Traits/Configuration/LoadingConfigurationTest.php b/tests/Traits/Configuration/LoadingConfigurationTest.php
new file mode 100644
index 000000000..2d92de136
--- /dev/null
+++ b/tests/Traits/Configuration/LoadingConfigurationTest.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Configuration;
+
+use Rappasoft\LaravelLivewireTables\Tests\TestCase;
+
+class LoadingConfigurationTest extends TestCase
+{
+    /** @test */
+    public function can_set_loading_placeholder_status_enabled(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+
+    /** @test */
+    public function can_set_loading_placeholder_status_disabled(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderDisabled();
+
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+
+}
diff --git a/tests/Traits/Helpers/LoadingHelpersTest.php b/tests/Traits/Helpers/LoadingHelpersTest.php
new file mode 100644
index 000000000..866015227
--- /dev/null
+++ b/tests/Traits/Helpers/LoadingHelpersTest.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Helpers;
+
+use Rappasoft\LaravelLivewireTables\Tests\TestCase;
+
+class LoadingHelpersTest extends TestCase
+{
+    /** @test */
+    public function can_get_loading_placeholder_status(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->getDisplayLoadingPlaceholder());
+        
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+
+
+}

From 3b634585cc861409395f6529c87d9fde0a1202a6 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:18:10 +0000
Subject: [PATCH 29/36] Fix styling

---
 .../LoadingConfigurationTest.php              | 69 +++++++++----------
 tests/Traits/Helpers/LoadingHelpersTest.php   |  4 +-
 2 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/tests/Traits/Configuration/LoadingConfigurationTest.php b/tests/Traits/Configuration/LoadingConfigurationTest.php
index 2d92de136..c574bc3a5 100644
--- a/tests/Traits/Configuration/LoadingConfigurationTest.php
+++ b/tests/Traits/Configuration/LoadingConfigurationTest.php
@@ -1,35 +1,34 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Configuration;
-
-use Rappasoft\LaravelLivewireTables\Tests\TestCase;
-
-class LoadingConfigurationTest extends TestCase
-{
-    /** @test */
-    public function can_set_loading_placeholder_status_enabled(): void
-    {
-        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
-
-        $this->basicTable->setLoadingPlaceholderEnabled();
-
-        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
-
-    }
-
-    /** @test */
-    public function can_set_loading_placeholder_status_disabled(): void
-    {
-        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
-
-        $this->basicTable->setLoadingPlaceholderEnabled();
-
-        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
-
-        $this->basicTable->setLoadingPlaceholderDisabled();
-
-        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
-
-    }
-
-}
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Configuration;
+
+use Rappasoft\LaravelLivewireTables\Tests\TestCase;
+
+class LoadingConfigurationTest extends TestCase
+{
+    /** @test */
+    public function can_set_loading_placeholder_status_enabled(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+
+    /** @test */
+    public function can_set_loading_placeholder_status_disabled(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderDisabled();
+
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+}
diff --git a/tests/Traits/Helpers/LoadingHelpersTest.php b/tests/Traits/Helpers/LoadingHelpersTest.php
index 866015227..eb76d5d5b 100644
--- a/tests/Traits/Helpers/LoadingHelpersTest.php
+++ b/tests/Traits/Helpers/LoadingHelpersTest.php
@@ -14,10 +14,8 @@ public function can_get_loading_placeholder_status(): void
         $this->basicTable->setLoadingPlaceholderEnabled();
 
         $this->assertTrue($this->basicTable->getDisplayLoadingPlaceholder());
-        
+
         $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
 
     }
-
-
 }

From 20b50d042c1f78717106b5cac2c6e14283845d87 Mon Sep 17 00:00:00 2001
From: lrljoe <joe@lowerrocklabs.com>
Date: Tue, 17 Oct 2023 17:35:07 +0000
Subject: [PATCH 30/36] Renaming Traits - Adding LoadingPlaceholder Tests

---
 CHANGELOG.md                                  |  6 +-
 src/DataTableComponent.php                    |  4 +-
 ...hp => LoadingPlaceholderConfiguration.php} |  2 +-
 ...pers.php => LoadingPlaceholderHelpers.php} |  9 +-
 ...Loading.php => WithLoadingPlaceholder.php} | 10 +-
 .../LoadingConfigurationTest.php              | 34 -------
 .../LoadingPlaceholderConfigurationTest.php   | 92 +++++++++++++++++++
 ....php => LoadingPlaceholderHelpersTest.php} |  2 +-
 .../Visuals/LoadingPlaceholderVisualsTest.php | 21 +++++
 9 files changed, 130 insertions(+), 50 deletions(-)
 rename src/Traits/Configuration/{LoadingConfiguration.php => LoadingPlaceholderConfiguration.php} (97%)
 rename src/Traits/Helpers/{LoadingHelpers.php => LoadingPlaceholderHelpers.php} (69%)
 rename src/Traits/{WithLoading.php => WithLoadingPlaceholder.php} (69%)
 delete mode 100644 tests/Traits/Configuration/LoadingConfigurationTest.php
 create mode 100644 tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
 rename tests/Traits/Helpers/{LoadingHelpersTest.php => LoadingPlaceholderHelpersTest.php} (90%)
 create mode 100644 tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e2869cb0..2231ea6e0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,10 +2,10 @@
 
 All notable changes to `laravel-livewire-tables` will be documented in this file
 
-## [3.0.0-beta.4] - 2023-10-15
+## [3.0.0-beta.4] - 2023-10-17
 - Introduction of Loading Placeholder
 - Docs livewire namespace fix [Here](https://github.com/rappasoft/laravel-livewire-tables/pull/1420)
-- Add CollapseAlways capability
+- Add CollapseAlways capability for Columns
 
 ## [3.0.0-beta.3] - 2023-10-13
 - Fix for Livewire ^3.0.6 where the table loading causes an additional lifecycle
@@ -1005,4 +1005,4 @@ Ground Up Rebuild
 [0.1.4]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.3...v0.1.4
 [0.1.3]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.2...v0.1.3
 [0.1.2]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.1...v0.1.2
-[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
\ No newline at end of file
+[0.1.1]: https://github.com/rappasoft/laravel-livewire-tables/compare/v0.1.0...v0.1.1
diff --git a/src/DataTableComponent.php b/src/DataTableComponent.php
index fc3dbe3df..ebe33c7a2 100644
--- a/src/DataTableComponent.php
+++ b/src/DataTableComponent.php
@@ -14,7 +14,7 @@
 use Rappasoft\LaravelLivewireTables\Traits\WithEvents;
 use Rappasoft\LaravelLivewireTables\Traits\WithFilters;
 use Rappasoft\LaravelLivewireTables\Traits\WithFooter;
-use Rappasoft\LaravelLivewireTables\Traits\WithLoading;
+use Rappasoft\LaravelLivewireTables\Traits\WithLoadingPlaceholder;
 use Rappasoft\LaravelLivewireTables\Traits\WithPagination;
 use Rappasoft\LaravelLivewireTables\Traits\WithRefresh;
 use Rappasoft\LaravelLivewireTables\Traits\WithReordering;
@@ -33,7 +33,7 @@ abstract class DataTableComponent extends Component
         WithEvents,
         WithFilters,
         WithFooter,
-        WithLoading,
+        WithLoadingPlaceholder,
         WithPagination,
         WithRefresh,
         WithReordering,
diff --git a/src/Traits/Configuration/LoadingConfiguration.php b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php
similarity index 97%
rename from src/Traits/Configuration/LoadingConfiguration.php
rename to src/Traits/Configuration/LoadingPlaceholderConfiguration.php
index ecea3143f..a88bcccda 100644
--- a/src/Traits/Configuration/LoadingConfiguration.php
+++ b/src/Traits/Configuration/LoadingPlaceholderConfiguration.php
@@ -2,7 +2,7 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits\Configuration;
 
-trait LoadingConfiguration
+trait LoadingPlaceholderConfiguration
 {
     public function setLoadingPlaceholderStatus(bool $status): self
     {
diff --git a/src/Traits/Helpers/LoadingHelpers.php b/src/Traits/Helpers/LoadingPlaceholderHelpers.php
similarity index 69%
rename from src/Traits/Helpers/LoadingHelpers.php
rename to src/Traits/Helpers/LoadingPlaceholderHelpers.php
index 11c7a8fc1..4a5a9e7e7 100644
--- a/src/Traits/Helpers/LoadingHelpers.php
+++ b/src/Traits/Helpers/LoadingPlaceholderHelpers.php
@@ -2,7 +2,7 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits\Helpers;
 
-trait LoadingHelpers
+trait LoadingPlaceholderHelpers
 {
     public function hasDisplayLoadingPlaceholder(): bool
     {
@@ -21,17 +21,18 @@ public function getLoadingPlaceholderContent(): string
 
     public function getLoadingPlaceholderAttributes(): array
     {
-        return $this->loadingPlaceHolderAttributes;
+        return count($this->loadingPlaceHolderAttributes) ? $this->loadingPlaceHolderAttributes : ['default' => true];
+
     }
 
     public function getLoadingPlaceHolderIconAttributes(): array
     {
-        return $this->loadingPlaceHolderIconAttributes ?? ['default' => true];
+        return count($this->loadingPlaceHolderIconAttributes) ? $this->loadingPlaceHolderIconAttributes : ['default' => true];
     }
 
     public function getLoadingPlaceHolderWrapperAttributes(): array
     {
-        return $this->loadingPlaceHolderWrapperAttributes ?? ['default' => true];
+        return count($this->loadingPlaceHolderWrapperAttributes) ? $this->loadingPlaceHolderWrapperAttributes : ['default' => true];
     }
 
     public function hasLoadingPlaceholderBlade(): bool
diff --git a/src/Traits/WithLoading.php b/src/Traits/WithLoadingPlaceholder.php
similarity index 69%
rename from src/Traits/WithLoading.php
rename to src/Traits/WithLoadingPlaceholder.php
index c3aa12129..47c3a3072 100644
--- a/src/Traits/WithLoading.php
+++ b/src/Traits/WithLoadingPlaceholder.php
@@ -2,13 +2,13 @@
 
 namespace Rappasoft\LaravelLivewireTables\Traits;
 
-use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingConfiguration;
-use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingHelpers;
+use Rappasoft\LaravelLivewireTables\Traits\Configuration\LoadingPlaceholderConfiguration;
+use Rappasoft\LaravelLivewireTables\Traits\Helpers\LoadingPlaceholderHelpers;
 
-trait WithLoading
+trait WithLoadingPlaceholder
 {
-    use LoadingConfiguration,
-        LoadingHelpers;
+    use LoadingPlaceholderConfiguration,
+        LoadingPlaceholderHelpers;
 
     protected bool $displayLoadingPlaceholder = false;
 
diff --git a/tests/Traits/Configuration/LoadingConfigurationTest.php b/tests/Traits/Configuration/LoadingConfigurationTest.php
deleted file mode 100644
index c574bc3a5..000000000
--- a/tests/Traits/Configuration/LoadingConfigurationTest.php
+++ /dev/null
@@ -1,34 +0,0 @@
-<?php
-
-namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Configuration;
-
-use Rappasoft\LaravelLivewireTables\Tests\TestCase;
-
-class LoadingConfigurationTest extends TestCase
-{
-    /** @test */
-    public function can_set_loading_placeholder_status_enabled(): void
-    {
-        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
-
-        $this->basicTable->setLoadingPlaceholderEnabled();
-
-        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
-
-    }
-
-    /** @test */
-    public function can_set_loading_placeholder_status_disabled(): void
-    {
-        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
-
-        $this->basicTable->setLoadingPlaceholderEnabled();
-
-        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
-
-        $this->basicTable->setLoadingPlaceholderDisabled();
-
-        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
-
-    }
-}
diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
new file mode 100644
index 000000000..88cd0fa71
--- /dev/null
+++ b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
@@ -0,0 +1,92 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Configuration;
+
+use Rappasoft\LaravelLivewireTables\Tests\TestCase;
+
+class LoadingPlaceholderConfigurationTest extends TestCase
+{
+    /** @test */
+    public function can_set_loading_placeholder_status_enabled(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+
+    /** @test */
+    public function can_set_loading_placeholder_status_disabled(): void
+    {
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->basicTable->setLoadingPlaceholderDisabled();
+
+        $this->assertFalse($this->basicTable->hasDisplayLoadingPlaceholder());
+
+    }
+
+    
+    /** @test */
+    public function can_set_loading_placeholder_content(): void
+    {
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertTrue($this->basicTable->hasDisplayLoadingPlaceholder());
+
+        $this->assertSame('Loading', $this->basicTable->getLoadingPlaceholderContent());
+
+        $this->basicTable->setLoadingPlaceholderContent('LoadingConfigurationTest - LoadingLoadingLoading');
+
+        $this->assertSame('LoadingConfigurationTest - LoadingLoadingLoading', $this->basicTable->getLoadingPlaceholderContent());
+
+    }
+    
+
+
+    /** @test */
+    public function can_set_loading_placeholder_attributes(): void
+    {
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderAttributes(['class' => 'test12345']);
+
+        $this->assertSame(['class' => 'test12345'], $this->basicTable->getLoadingPlaceHolderAttributes());
+
+    }
+
+    /** @test */
+    public function can_set_loading_placeholder_icon_attributes(): void
+    {
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderIconAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderIconAttributes(['class' => 'test123']);
+
+        $this->assertSame(['class' => 'test123'], $this->basicTable->getLoadingPlaceHolderIconAttributes());
+
+    }
+
+
+    /** @test */
+    public function can_set_loading_placeholder_wrapper_attributes(): void
+    {
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertSame(['default' => true], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+
+        $this->basicTable->setLoadingPlaceHolderWrapperAttributes(['class' => 'test1234567-wrapper']);
+
+        $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
+    }
+    
+}
diff --git a/tests/Traits/Helpers/LoadingHelpersTest.php b/tests/Traits/Helpers/LoadingPlaceholderHelpersTest.php
similarity index 90%
rename from tests/Traits/Helpers/LoadingHelpersTest.php
rename to tests/Traits/Helpers/LoadingPlaceholderHelpersTest.php
index eb76d5d5b..5d3b92c28 100644
--- a/tests/Traits/Helpers/LoadingHelpersTest.php
+++ b/tests/Traits/Helpers/LoadingPlaceholderHelpersTest.php
@@ -4,7 +4,7 @@
 
 use Rappasoft\LaravelLivewireTables\Tests\TestCase;
 
-class LoadingHelpersTest extends TestCase
+class LoadingPlaceholderHelpersTest extends TestCase
 {
     /** @test */
     public function can_get_loading_placeholder_status(): void
diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
new file mode 100644
index 000000000..af2112801
--- /dev/null
+++ b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Visuals;
+
+use Livewire\Livewire;
+use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
+use Rappasoft\LaravelLivewireTables\Tests\Http\Livewire\PetsTable;
+use Rappasoft\LaravelLivewireTables\Tests\TestCase;
+
+class LoadingPlaceholderVisualsTest extends TestCase
+{
+    /** @test */
+    public function can_see_placeholder_text(): void
+    {
+        Livewire::test(PetsTable::class)
+            ->call('setPerPageAccepted', [1])
+            ->call('setPerPage', 1)
+            ->assertSeeHtml('<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">');
+    }
+
+}

From 3ff4bdd13e523b00f83586edee92dbb78a7ffda7 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:35:43 +0000
Subject: [PATCH 31/36] Fix styling

---
 .../Configuration/LoadingPlaceholderConfigurationTest.php    | 5 -----
 tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php       | 2 --
 2 files changed, 7 deletions(-)

diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
index 88cd0fa71..38be0cb00 100644
--- a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
+++ b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
@@ -32,7 +32,6 @@ public function can_set_loading_placeholder_status_disabled(): void
 
     }
 
-    
     /** @test */
     public function can_set_loading_placeholder_content(): void
     {
@@ -47,8 +46,6 @@ public function can_set_loading_placeholder_content(): void
         $this->assertSame('LoadingConfigurationTest - LoadingLoadingLoading', $this->basicTable->getLoadingPlaceholderContent());
 
     }
-    
-
 
     /** @test */
     public function can_set_loading_placeholder_attributes(): void
@@ -76,7 +73,6 @@ public function can_set_loading_placeholder_icon_attributes(): void
 
     }
 
-
     /** @test */
     public function can_set_loading_placeholder_wrapper_attributes(): void
     {
@@ -88,5 +84,4 @@ public function can_set_loading_placeholder_wrapper_attributes(): void
 
         $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
     }
-    
 }
diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
index af2112801..8400a2056 100644
--- a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
+++ b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
@@ -3,7 +3,6 @@
 namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Visuals;
 
 use Livewire\Livewire;
-use Rappasoft\LaravelLivewireTables\Exceptions\DataTableConfigurationException;
 use Rappasoft\LaravelLivewireTables\Tests\Http\Livewire\PetsTable;
 use Rappasoft\LaravelLivewireTables\Tests\TestCase;
 
@@ -17,5 +16,4 @@ public function can_see_placeholder_text(): void
             ->call('setPerPage', 1)
             ->assertSeeHtml('<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">');
     }
-
 }

From 32305b10bdbaa4e5c6969c52c1b9c53674d869e2 Mon Sep 17 00:00:00 2001
From: lrljoe <joe@lowerrocklabs.com>
Date: Tue, 17 Oct 2023 17:40:41 +0000
Subject: [PATCH 32/36] Add blade test

---
 .../LoadingPlaceholderConfigurationTest.php         | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
index 38be0cb00..b76b0d3a6 100644
--- a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
+++ b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
@@ -84,4 +84,17 @@ public function can_set_loading_placeholder_wrapper_attributes(): void
 
         $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
     }
+
+    
+    /** @test */
+    public function can_set_loading_placeholder_custom_blade(): void
+    {
+        $this->basicTable->setLoadingPlaceholderEnabled();
+
+        $this->assertNull($this->basicTable->getLoadingPlaceHolderBlade());
+
+        $this->basicTable->setLoadingPlaceholderBlade('test-blade');
+
+        $this->assertSame('test-blade', $this->basicTable->getLoadingPlaceHolderBlade());
+    }
 }

From 30b26e4c4118026e63995e644b7fce8fb4473b9d Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Tue, 17 Oct 2023 17:41:09 +0000
Subject: [PATCH 33/36] Fix styling

---
 .../Traits/Configuration/LoadingPlaceholderConfigurationTest.php | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
index b76b0d3a6..e5b033f99 100644
--- a/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
+++ b/tests/Traits/Configuration/LoadingPlaceholderConfigurationTest.php
@@ -85,7 +85,6 @@ public function can_set_loading_placeholder_wrapper_attributes(): void
         $this->assertSame(['class' => 'test1234567-wrapper'], $this->basicTable->getLoadingPlaceHolderWrapperAttributes());
     }
 
-    
     /** @test */
     public function can_set_loading_placeholder_custom_blade(): void
     {

From 18522b5dfeb51d73c43f1547ce3af4f23025f0e2 Mon Sep 17 00:00:00 2001
From: lrljoe <joe@lowerrocklabs.com>
Date: Tue, 17 Oct 2023 19:06:36 +0000
Subject: [PATCH 34/36] Add Placeholder Test Table, Basic Visuals Test

---
 .../Livewire/PetsTableLoadingPlaceholder.php  | 150 ++++++++++++++++++
 .../Visuals/LoadingPlaceholderVisualsTest.php |  47 +++++-
 2 files changed, 191 insertions(+), 6 deletions(-)
 create mode 100644 tests/Http/Livewire/PetsTableLoadingPlaceholder.php

diff --git a/tests/Http/Livewire/PetsTableLoadingPlaceholder.php b/tests/Http/Livewire/PetsTableLoadingPlaceholder.php
new file mode 100644
index 000000000..3938c17cd
--- /dev/null
+++ b/tests/Http/Livewire/PetsTableLoadingPlaceholder.php
@@ -0,0 +1,150 @@
+<?php
+
+namespace Rappasoft\LaravelLivewireTables\Tests\Http\Livewire;
+
+use Illuminate\Database\Eloquent\Builder;
+use Rappasoft\LaravelLivewireTables\DataTableComponent;
+use Rappasoft\LaravelLivewireTables\Tests\Models\Breed;
+use Rappasoft\LaravelLivewireTables\Tests\Models\Pet;
+use Rappasoft\LaravelLivewireTables\Tests\Models\Species;
+use Rappasoft\LaravelLivewireTables\Views\Column;
+use Rappasoft\LaravelLivewireTables\Views\Columns\ImageColumn;
+use Rappasoft\LaravelLivewireTables\Views\Columns\LinkColumn;
+use Rappasoft\LaravelLivewireTables\Views\Filters\DateFilter;
+use Rappasoft\LaravelLivewireTables\Views\Filters\DateTimeFilter;
+use Rappasoft\LaravelLivewireTables\Views\Filters\MultiSelectDropdownFilter;
+use Rappasoft\LaravelLivewireTables\Views\Filters\MultiSelectFilter;
+use Rappasoft\LaravelLivewireTables\Views\Filters\NumberFilter;
+use Rappasoft\LaravelLivewireTables\Views\Filters\SelectFilter;
+use Rappasoft\LaravelLivewireTables\Views\Filters\TextFilter;
+
+class PetsTableLoadingPlaceholder extends DataTableComponent
+{
+    public $model = Pet::class;
+
+    public function configure(): void
+    {
+        $this->setPrimaryKey('id')
+        ->setLoadingPlaceholderEnabled()
+        ->setLoadingPlaceholderContent('TestLoadingPlaceholderContentTestTest');
+    }
+
+    public function columns(): array
+    {
+        return [
+            Column::make('ID', 'id')
+                ->sortable()
+                ->setSortingPillTitle('Key')
+                ->setSortingPillDirections('0-9', '9-0'),
+            Column::make('Sort')
+                ->sortable()
+                ->excludeFromColumnSelect(),
+            Column::make('Name')
+                ->sortable()
+                ->secondaryHeader($this->getFilterByKey('pet_name_filter'))
+                ->footerFilter('pet_name_filter')
+                ->searchable(),
+
+            Column::make('Age'),
+
+            Column::make('Breed', 'breed.name')
+                ->secondaryHeaderFilter('breed')
+                ->footer($this->getFilterByKey('breed'))
+                ->sortable(
+                    fn (Builder $query, string $direction) => $query->orderBy('pets.id', $direction)
+                )
+                ->searchable(
+                    fn (Builder $query, $searchTerm) => $query->orWhere('breed.name', $searchTerm)
+                ),
+
+            Column::make('Other')
+                ->label(function ($row, Column $column) {
+                    return 'Other';
+                })
+                ->footer(function ($rows) {
+                    return 'Count: '.$rows->count();
+                }),
+
+            LinkColumn::make('Link')
+                ->title(fn ($row) => 'Edit')
+                ->location(fn ($row) => 'http://www.google.com')
+                ->attributes(fn ($row) => [
+                    'class' => 'rounded-full',
+                    'alt' => $row->name.' Avatar',
+                ]),
+            ImageColumn::make('RowImg')
+                ->location(fn ($row) => 'test'.$row->id)
+                ->attributes(fn ($row) => [
+                    'class' => 'rounded-full',
+                    'alt' => $row->name.' Avatar',
+                ]),
+            Column::make('Last Visit', 'last_visit')
+                ->sortable()
+                ->deselected(),
+        ];
+    }
+
+    public function filters(): array
+    {
+        return [
+            MultiSelectFilter::make('Breed')
+                ->options(
+                    Breed::query()
+                        ->orderBy('name')
+                        ->get()
+                        ->keyBy('id')
+                        ->map(fn ($breed) => $breed->name)
+                        ->toArray()
+                )
+                ->filter(function (Builder $builder, array $values) {
+                    return $builder->whereIn('breed_id', $values);
+                }),
+            MultiSelectDropdownFilter::make('Species')
+                ->options(
+                    Species::query()
+                        ->orderBy('name')
+                        ->get()
+                        ->keyBy('id')
+                        ->map(fn ($species) => $species->name)
+                        ->toArray()
+                )
+                ->filter(function (Builder $builder, array $values) {
+                    return $builder->whereIn('species_id', $values);
+                }),
+            NumberFilter::make('Breed ID', 'breed_id_filter')
+                ->filter(function (Builder $builder, string $value) {
+                    return $builder->where('breed_id', '=', $value);
+                }),
+
+            TextFilter::make('Pet Name', 'pet_name_filter')
+                ->filter(function (Builder $builder, string $value) {
+                    return $builder->where('pets.name', '=', $value);
+                }),
+
+            DateFilter::make('Last Visit After Date', 'last_visit_date_filter')
+                ->filter(function (Builder $builder, string $value) {
+                    return $builder->whereDate('pets.last_visit', '=>', $value);
+                }),
+
+            DateTimeFilter::make('Last Visit Before DateTime', 'last_visit_datetime_filter')
+                ->filter(function (Builder $builder, string $value) {
+                    return $builder->whereDate('pets.last_visit', '<=', $value);
+                }),
+
+            SelectFilter::make('Breed SelectFilter', 'breed_select_filter')
+                ->options(
+                    Breed::query()
+                        ->orderBy('name')
+                        ->get()
+                        ->keyBy('id')
+                        ->map(fn ($breed) => $breed->name)
+                        ->toArray()
+                )
+                ->filter(function (Builder $builder, string $value) {
+                    return $builder->where('breed_id', $value);
+                })
+                ->setCustomFilterLabel('livewire-tables::tests.testFilterLabel')
+                ->setFilterPillBlade('livewire-tables::tests.testFilterPills'),
+        ];
+    }
+}
diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
index 8400a2056..4f9ef0822 100644
--- a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
+++ b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
@@ -3,17 +3,52 @@
 namespace Rappasoft\LaravelLivewireTables\Tests\Traits\Visuals;
 
 use Livewire\Livewire;
-use Rappasoft\LaravelLivewireTables\Tests\Http\Livewire\PetsTable;
+use Rappasoft\LaravelLivewireTables\Tests\Http\Livewire\PetsTableLoadingPlaceholder;
 use Rappasoft\LaravelLivewireTables\Tests\TestCase;
 
 class LoadingPlaceholderVisualsTest extends TestCase
 {
     /** @test */
-    public function can_see_placeholder_text(): void
+    public function can_see_placeholder_section(): void
     {
-        Livewire::test(PetsTable::class)
-            ->call('setPerPageAccepted', [1])
-            ->call('setPerPage', 1)
-            ->assertSeeHtml('<nav role="navigation" aria-label="Pagination Navigation" class="flex items-center justify-between">');
+        Livewire::test(PetsTableLoadingPlaceholder::class)
+            ->call('setPerPageAccepted', [1,5,10])
+            ->assertSeeHtml('tr wire:key="table-loader" class="hidden d-none"')
+            ->call('setPerPage', 5);
     }
+
+        /** @test */
+        public function can_see_placeholder_custom_text(): void
+        {
+            Livewire::test(PetsTableLoadingPlaceholder::class)
+                ->call('setPerPageAccepted', [1,5,10])
+                ->assertSeeHtmlInOrder([
+                    '<tr wire:key="table-loader" class="hidden d-none"',
+                    '<td colspan="',
+                    '<div class="h-min self-center align-middle text-center"',
+                    '<div class="lds-hourglass"',
+                    '<div>TestLoadingPlaceholderContentTestTest</div>'
+                ])
+                ->call('setPerPage', 5);
+        }
+
+        /** @test */
+        public function can_see_correct_placeholder_text_visually(): void
+        {
+            Livewire::test(PetsTableLoadingPlaceholder::class)
+                ->call('setPerPageAccepted', [1,5,10])
+                ->assertSee('TestLoadingPlaceholderContentTestTest')
+                ->call('setPerPage', 5);
+        }
+
+        /** @test */
+        public function cannot_see_incorrect_placeholder_text_visually(): void
+        {
+            Livewire::test(PetsTableLoadingPlaceholder::class)
+                ->call('setPerPageAccepted', [1,5,10])
+                ->assertDontSee('TestLoadingPlaceholderContentTestTest22')
+                ->call('setPerPage', 5);
+        }
+        
+    
 }

From de47656e682d14991725c20ccc64978ac174e840 Mon Sep 17 00:00:00 2001
From: lrljoe <lrljoe@users.noreply.github.com>
Date: Tue, 17 Oct 2023 19:07:05 +0000
Subject: [PATCH 35/36] Fix styling

---
 .../Livewire/PetsTableLoadingPlaceholder.php  |  4 +-
 .../Visuals/LoadingPlaceholderVisualsTest.php | 64 +++++++++----------
 2 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/tests/Http/Livewire/PetsTableLoadingPlaceholder.php b/tests/Http/Livewire/PetsTableLoadingPlaceholder.php
index 3938c17cd..c5096c496 100644
--- a/tests/Http/Livewire/PetsTableLoadingPlaceholder.php
+++ b/tests/Http/Livewire/PetsTableLoadingPlaceholder.php
@@ -25,8 +25,8 @@ class PetsTableLoadingPlaceholder extends DataTableComponent
     public function configure(): void
     {
         $this->setPrimaryKey('id')
-        ->setLoadingPlaceholderEnabled()
-        ->setLoadingPlaceholderContent('TestLoadingPlaceholderContentTestTest');
+            ->setLoadingPlaceholderEnabled()
+            ->setLoadingPlaceholderContent('TestLoadingPlaceholderContentTestTest');
     }
 
     public function columns(): array
diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
index 4f9ef0822..04cf3e788 100644
--- a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
+++ b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
@@ -12,43 +12,41 @@ class LoadingPlaceholderVisualsTest extends TestCase
     public function can_see_placeholder_section(): void
     {
         Livewire::test(PetsTableLoadingPlaceholder::class)
-            ->call('setPerPageAccepted', [1,5,10])
+            ->call('setPerPageAccepted', [1, 5, 10])
             ->assertSeeHtml('tr wire:key="table-loader" class="hidden d-none"')
             ->call('setPerPage', 5);
     }
 
-        /** @test */
-        public function can_see_placeholder_custom_text(): void
-        {
-            Livewire::test(PetsTableLoadingPlaceholder::class)
-                ->call('setPerPageAccepted', [1,5,10])
-                ->assertSeeHtmlInOrder([
-                    '<tr wire:key="table-loader" class="hidden d-none"',
-                    '<td colspan="',
-                    '<div class="h-min self-center align-middle text-center"',
-                    '<div class="lds-hourglass"',
-                    '<div>TestLoadingPlaceholderContentTestTest</div>'
-                ])
-                ->call('setPerPage', 5);
-        }
+    /** @test */
+    public function can_see_placeholder_custom_text(): void
+    {
+        Livewire::test(PetsTableLoadingPlaceholder::class)
+            ->call('setPerPageAccepted', [1, 5, 10])
+            ->assertSeeHtmlInOrder([
+                '<tr wire:key="table-loader" class="hidden d-none"',
+                '<td colspan="',
+                '<div class="h-min self-center align-middle text-center"',
+                '<div class="lds-hourglass"',
+                '<div>TestLoadingPlaceholderContentTestTest</div>',
+            ])
+            ->call('setPerPage', 5);
+    }
 
-        /** @test */
-        public function can_see_correct_placeholder_text_visually(): void
-        {
-            Livewire::test(PetsTableLoadingPlaceholder::class)
-                ->call('setPerPageAccepted', [1,5,10])
-                ->assertSee('TestLoadingPlaceholderContentTestTest')
-                ->call('setPerPage', 5);
-        }
+    /** @test */
+    public function can_see_correct_placeholder_text_visually(): void
+    {
+        Livewire::test(PetsTableLoadingPlaceholder::class)
+            ->call('setPerPageAccepted', [1, 5, 10])
+            ->assertSee('TestLoadingPlaceholderContentTestTest')
+            ->call('setPerPage', 5);
+    }
 
-        /** @test */
-        public function cannot_see_incorrect_placeholder_text_visually(): void
-        {
-            Livewire::test(PetsTableLoadingPlaceholder::class)
-                ->call('setPerPageAccepted', [1,5,10])
-                ->assertDontSee('TestLoadingPlaceholderContentTestTest22')
-                ->call('setPerPage', 5);
-        }
-        
-    
+    /** @test */
+    public function cannot_see_incorrect_placeholder_text_visually(): void
+    {
+        Livewire::test(PetsTableLoadingPlaceholder::class)
+            ->call('setPerPageAccepted', [1, 5, 10])
+            ->assertDontSee('TestLoadingPlaceholderContentTestTest22')
+            ->call('setPerPage', 5);
+    }
 }

From 8b5ced336ed6be277a03f14c2926b4c71571b7d4 Mon Sep 17 00:00:00 2001
From: lrljoe <joe@lowerrocklabs.com>
Date: Tue, 17 Oct 2023 19:33:55 +0000
Subject: [PATCH 36/36] Update Docs for Placeholder

---
 docs/misc/custom-markup.md       |  4 +-
 docs/misc/debugging.md           |  2 +-
 docs/misc/loading-placeholder.md | 78 ++++++++++++++++++++++++++++++++
 docs/misc/multiple-tables.md     |  2 +-
 docs/misc/saving-state.md        |  2 +-
 5 files changed, 83 insertions(+), 5 deletions(-)
 create mode 100644 docs/misc/loading-placeholder.md

diff --git a/docs/misc/custom-markup.md b/docs/misc/custom-markup.md
index 62e1aa012..8bfb6ec86 100644
--- a/docs/misc/custom-markup.md
+++ b/docs/misc/custom-markup.md
@@ -1,6 +1,6 @@
 ---
 title: Adding Custom Markup
-weight: 3
+weight: 4
 ---
 
 If you would like to append any custom markup right before the end of the component, you may use the `customView` method and return a view.
@@ -12,4 +12,4 @@ public function customView(): string
 {
     return 'includes.custom';
 }
-```
\ No newline at end of file
+```
diff --git a/docs/misc/debugging.md b/docs/misc/debugging.md
index c1c8f3193..fb42f5a7f 100644
--- a/docs/misc/debugging.md
+++ b/docs/misc/debugging.md
@@ -1,6 +1,6 @@
 ---
 title: Debugging
-weight: 4
+weight: 5
 ---
 
 ## Configuration
diff --git a/docs/misc/loading-placeholder.md b/docs/misc/loading-placeholder.md
new file mode 100644
index 000000000..20ca7f9b5
--- /dev/null
+++ b/docs/misc/loading-placeholder.md
@@ -0,0 +1,78 @@
+---
+title: Loading Placeholder
+weight: 2
+---
+
+When running complex filters or searches, or displaying larger number of records, you can make use of the built-in Loading Placeholder, this is disabled by default.
+
+### setLoadingPlaceholderStatus
+You may pass a boolean to this, which will either enable (true) or disable (false) the loading placeholder
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderStatus(true);
+    }
+```
+
+### setLoadingPlaceholderEnabled
+
+Use this method to enable the loading placeholder:
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderEnabled();
+    }
+```
+
+### setLoadingPlaceholderDisabled
+
+Use this method to disable the loading placeholder:
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderDisabled();
+    }
+```
+
+### setLoadingPlaceholderContent
+
+You may use this method to set custom text for the placeholder:
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceholderContent('Text To Display');
+    }
+```
+### setLoadingPlaceHolderWrapperAttributes
+
+This method allows you to customise the attributes for the &lt;tr&gt; element used as a Placeholder when the table is loading.  Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceHolderWrapperAttributes([
+            'class' => 'text-bold',
+            'default' => false,
+        ]);
+    }
+
+```
+
+### setLoadingPlaceHolderIconAttributes
+
+This method allows you to customise the attributes for the &lt;div&gt; element that is used solely for the PlaceholderIcon.  Similar to other setAttribute methods, this accepts a range of attributes, and a boolean "default", which will enable/disable the default attributes.
+
+```php
+    public function configure(): void
+    {
+        $this->setLoadingPlaceHolderIconAttributes([
+            'class' => 'lds-hourglass',
+            'default' => false,
+        ]);
+    }
+
+```
diff --git a/docs/misc/multiple-tables.md b/docs/misc/multiple-tables.md
index 026d8ca1b..2a6ac0dd4 100644
--- a/docs/misc/multiple-tables.md
+++ b/docs/misc/multiple-tables.md
@@ -1,6 +1,6 @@
 ---
 title: Multiple Tables Same Page
-weight: 2
+weight: 3
 ---
 
 This feature works for mutiple tables on the same page that are **different** components.
diff --git a/docs/misc/saving-state.md b/docs/misc/saving-state.md
index 3ce5148ee..8d85acd26 100644
--- a/docs/misc/saving-state.md
+++ b/docs/misc/saving-state.md
@@ -1,6 +1,6 @@
 ---
 title: Saving Table State
-weight: 5
+weight: 6
 ---
 
 There may be occasions that you'd like to save the table state, for example if you have a complex set of filters, search parameters, or simply to remember which page you were on!