Fix Loading Placeholder Bug - Breaking Table (#1969)

* FixLoadingPlaceholderBug * Adjust tests for new Loading blade
rappasoft · Sep 25, 2024 · 2d7f705 · 2d7f705
1 parent 2f4224b
commit 2d7f705
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 8 deletions.
diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php
@@ -9,15 +9,15 @@
     @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount])
 @else
 
-    <tr wire:key="{{ $tableName }}-loader" class="hidden d-none"
+    <tr wire:key="{{ $tableName }}-loader"
     {{
         $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)]);
+            ->class(['hidden w-full text-center h-screen place-items-center align-middle' => $isTailwind && ($customAttributes['loader-wrapper']['default'] ?? true)])
+            ->class(['d-none w-100 text-center h-100 align-items-center' => $isBootstrap && ($customAttributes['loader-wrapper']['default'] ?? true)]);
     }}
     wire:loading.class.remove="hidden d-none"
     >
-        <td colspan="{{ $colCount }}">
+        <td colspan="{{ $colCount }}" wire:key="{{ $tableName }}-loader-column" >
             <div class="h-min self-center align-middle text-center">
                 <div class="lds-hourglass"
                 {{

diff --git a/resources/views/components/table/tr.blade.php b/resources/views/components/table/tr.blade.php
@@ -12,9 +12,9 @@
     x-on:dragover.prevent.throttle.500ms="currentlyReorderingStatus && dragOverEvent(event)"
     x-on:dragleave.prevent.throttle.500ms="currentlyReorderingStatus && dragLeaveEvent(event)"
     @if($this->hasDisplayLoadingPlaceholder()) 
-    wire:loading.remove
+        wire:loading.class.add="hidden d-none"
     @else
-    wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
+        wire:loading.class.delay="opacity-50 dark:bg-gray-900 dark:opacity-60"
     @endif
     id="{{ $tableName }}-row-{{ $row->{$primaryKey} }}"
     :draggable="currentlyReorderingStatus"

diff --git a/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php b/tests/Traits/Visuals/LoadingPlaceholderVisualsTest.php
@@ -12,7 +12,7 @@ public function test_can_see_placeholder_section(): void
     {
         Livewire::test(PetsTableLoadingPlaceholder::class)
             ->call('setPerPageAccepted', [1, 5, 10])
-            ->assertSeeHtml('tr wire:key="table-loader" class="hidden d-none"')
+            ->assertSeeHtml('tr wire:key="table-loader')
             ->call('setPerPage', 5);
     }
 
@@ -21,7 +21,7 @@ public function test_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"',
+                '<tr wire:key="table-loader"',
                 '<td colspan="',
                 '<div class="h-min self-center align-middle text-center"',
                 '<div class="lds-hourglass"',