lazy load

Author: Cannonb4ll

app/Livewire/Item/VoteHistory.php

@@ -4,12 +4,23 @@
 
 use App\Models\Item;
 use Livewire\Component;
+use Livewire\Attributes\On;
 use Illuminate\Contracts\View\View;
 
 class VoteHistory extends Component
 {
     public Item $item;
 
+    public bool $modalOpened = false;
+
+    #[On('open-modal')]
+    public function onModalOpen(string $id): void
+    {
+        if ($id === 'vote-history-modal') {
+            $this->modalOpened = true;
+        }
+    }
+
     public function render(): View
     {
         return view('livewire.item.vote-history');

resources/views/livewire/item/vote-history.blade.php

@@ -9,17 +9,23 @@ class="text-sm text-gray-500 hover:text-primary-500 dark:text-gray-400 dark:hove
             </button>
         </x-slot>
 
-        @if($this->item->votes()->exists())
-            @livewire(\App\Filament\Widgets\VoteHistoryChart::class, ['item' => $this->item])
+        @if($modalOpened)
+            @if($this->item->votes()->exists())
+                @livewire(\App\Filament\Widgets\VoteHistoryChart::class, ['item' => $this->item], key('vote-history-chart-' . $this->item->id))
+            @else
+                <x-filament::section>
+                    <x-slot name="heading">
+                        {{ trans('items.vote-history') }}
+                    </x-slot>
+                    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                        {{ trans('items.no-vote-history') }}
+                    </div>
+                </x-filament::section>
+            @endif
         @else
-            <x-filament::section>
-                <x-slot name="heading">
-                    {{ trans('items.vote-history') }}
-                </x-slot>
-                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
-                    {{ trans('items.no-vote-history') }}
-                </div>
-            </x-filament::section>
+            <div class="flex items-center justify-center py-12">
+                <x-filament::loading-indicator class="h-8 w-8" />
+            </div>
         @endif
     </x-filament::modal>
 </div>

tests/Feature/Livewire/Item/VoteHistoryTest.php

@@ -26,6 +26,7 @@
     ]);
 
     Livewire::test(VoteHistory::class, ['item' => $item])
+        ->dispatch('open-modal', id: 'vote-history-modal')
         ->assertSee(trans('items.no-vote-history'));
 });