feat: implement infinite scroll pagination for assignment cards with dynamic loading

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,

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>