From d609e959fb779a3366c1952428f392c68f0a7c1b Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Tue, 7 Apr 2026 08:41:18 +0700
Subject: [PATCH] feat: implement infinite scroll pagination for assignment
 cards with dynamic loading

---
 .../Assignments/Pages/ListAssignments.php       | 17 +++++++++++++++--
 .../learning/assignments/index.blade.php        |  8 +++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/app/Filament/Resources/Learning/Assignments/Pages/ListAssignments.php b/app/Filament/Resources/Learning/Assignments/Pages/ListAssignments.php
index 76d4474..e4da826 100644
--- a/app/Filament/Resources/Learning/Assignments/Pages/ListAssignments.php
+++ b/app/Filament/Resources/Learning/Assignments/Pages/ListAssignments.php
@@ -30,6 +30,13 @@ class ListAssignments extends Page
     #[Url]
     public ?string $search = '';
 
+    public int $perPage = 12;
+
+    public function loadMore(): void
+    {
+        $this->perPage += 12;
+    }
+
     #[Url]
     public ?int $course_id = null;
 
@@ -61,7 +68,10 @@ public function form(Schema $schema): Schema
                     ->placeholder('Cari Judul Tugas...')
                     ->autocomplete(false)
                     ->live(debounce: 500)
-                    ->afterStateUpdated(fn ($state) => $this->search = $state),
+                    ->afterStateUpdated(function ($state) {
+                        $this->search = $state;
+                        $this->perPage = 12;
+                    }),
 
                 Select::make('course_id')
                     ->label('Mata Kuliah')
@@ -75,7 +85,10 @@ public function form(Schema $schema): Schema
                     })
                     ->searchable()
                     ->live()
-                    ->afterStateUpdated(fn ($state) => $this->course_id = $state),
+                    ->afterStateUpdated(function ($state) {
+                        $this->course_id = $state;
+                        $this->perPage = 12;
+                    }),
             ])
             ->columns([
                 'sm' => 2,
diff --git a/resources/views/filament/resources/learning/assignments/index.blade.php b/resources/views/filament/resources/learning/assignments/index.blade.php
index a038dbf..48c9b8e 100644
--- a/resources/views/filament/resources/learning/assignments/index.blade.php
+++ b/resources/views/filament/resources/learning/assignments/index.blade.php
@@ -12,7 +12,7 @@
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-            @forelse ($this->assignmentCards as $card)
+            @forelse ($this->assignmentCards->take($this->perPage) as $card)
                 <div class="{{ $card->card_classes }} flex-col">
 
                     <a href="{{ $card->url }}"
@@ -105,5 +105,11 @@ class="flex flex-wrap items-center gap-3 px-5 py-4 border-t border-gray-100 dark
                 </div>
             @endforelse
         </div>
+
+        @if ($this->assignmentCards->count() > $this->perPage)
+            <div x-intersect="$wire.loadMore()" class="h-10 mt-6 flex items-center justify-center text-primary-500">
+                <x-filament::loading-indicator class="h-8 w-8" />
+            </div>
+        @endif
     </x-filament::section>
 </x-filament-panels::page>