paginate news

app/Http/Livewire/News/ArticleOverview.php

@@ -13,12 +13,19 @@ class ArticleOverview extends Component
     use Actions;
     use NostrTrait;
 
+    public $perPage = 9;
+
     public array $filters = [];
 
     protected $queryString = [
         'filters' => ['except' => ''],
     ];
 
+    public function loadMore()
+    {
+        $this->perPage += 9;
+    }
+
     public function nostr($id)
     {
         $libraryItem = LibraryItem::query()
@@ -84,7 +91,7 @@ class ArticleOverview extends Component
                                          ->where('type', 'markdown_article')
                                          ->where('news', true)
                                          ->orderByDesc('created_at')
-                                         ->get(),
+                                         ->paginate($this->perPage),
         ])->layout('layouts.app', [
             'SEOData' => new SEOData(
                 title: __('News'),

resources/views/livewire/news/article-overview.blade.php

@@ -173,6 +173,24 @@
                     @endif
                 @endforeach
 
+                    <div
+                        x-data="{
+                                observe () {
+                                    let observer = new IntersectionObserver((entries) => {
+                                        entries.forEach(entry => {
+                                            if (entry.isIntersecting) {
+                                                @this.call('loadMore')
+                                            }
+                                        })
+                                    }, {
+                                        root: null
+                                    })
+                                    observer.observe(this.$el)
+                                }
+                            }"
+                        x-init="observe"
+                    ></div>
+
             </div>
         </div>
     </div>