Add infinite scroll to packages to not load all of them up front

spatie · Sep 26, 2024 · 7c1eb37 · 7c1eb37
1 parent 38621d8
commit 7c1eb37
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 8 deletions.
diff --git a/app/Livewire/RepositoriesComponent.php b/app/Livewire/RepositoriesComponent.php
@@ -3,7 +3,10 @@
 namespace App\Livewire;
 
 use App\Models\Repository;
+use Illuminate\Contracts\View\View;
+use Illuminate\Database\Eloquent\Builder;
 use Illuminate\Support\Collection;
+use Livewire\Attributes\Computed;
 use Livewire\Component;
 
 class RepositoriesComponent extends Component
@@ -21,29 +24,60 @@ class RepositoriesComponent extends Component
 
     protected $queryString = ['search', 'sort'];
 
+    public Collection $repositories;
+
     public function mount(
         $type = 'packages',
         $filterable = true,
-        $sort = '-downloads'
+        $sort = '-downloads',
     ): void {
         $this->type = $type;
         $this->filterable = $filterable;
         $this->sort = request()->query('sort', $sort);
         $this->search = request()->query('search', '');
+        $this->repositories = collect();
+        $this->loadRepositories();
     }
 
-    private function getRepositories(): Collection
+    private function loadRepositories(bool $loadingMore = false): void
     {
-        return Repository::visible()
+        Repository::query()
+            ->visible()
+            ->when(
+                $loadingMore,
+                fn (Builder $query) => $query->offset($this->repositories->count()),
+            )
             ->search($this->search)
             ->applySort($this->sort)
-            ->get();
+            ->limit(9)
+            ->get()
+            ->each(function (Repository $repository) {
+                $this->repositories->push($repository);
+            });
+    }
+
+    public function loadMore(): void
+    {
+        $this->loadRepositories(loadingMore: true);
+    }
+
+    #[Computed]
+    public function total(): int
+    {
+        return Repository::query()
+            ->visible()
+            ->search($this->search)
+            ->count();
+    }
+
+    #[Computed]
+    public function hasMore(): bool
+    {
+        return $this->repositories->count() < $this->total;
     }
 
-    public function render()
+    public function render(): View
     {
-        return view('front.livewire.repositories', [
-            'repositories' => $this->getRepositories(),
-        ]);
+        return view('front.livewire.repositories');
     }
 }
diff --git a/resources/views/front/livewire/repositories.blade.php b/resources/views/front/livewire/repositories.blade.php
@@ -57,4 +57,9 @@ class="w-full form-input text-white bg-oss-black rounded-[12px] border-oss-gray-
             </p>
         @endunless
     </div>
+    @if ($this->hasMore)
+        <div class="w-full flex justify-center my-24" x-intersect="$wire.loadMore()">
+            <svg class="animate-spin w-10 h-10 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="fa-secondary" opacity=".4" d="M0 256C0 114.9 114.1 .5 255.1 0C237.9 .5 224 14.6 224 32c0 17.7 14.3 32 32 32C150 64 64 150 64 256s86 192 192 192c69.7 0 130.7-37.1 164.5-92.6c-3 6.6-3.3 14.8-1 22.2c1.2 3.7 3 7.2 5.4 10.3c1.2 1.5 2.6 3 4.1 4.3c.8 .7 1.6 1.3 2.4 1.9c.4 .3 .8 .6 1.3 .9s.9 .6 1.3 .8c5 2.9 10.6 4.3 16 4.3c11 0 21.8-5.7 27.7-16c-44.3 76.5-127 128-221.7 128C114.6 512 0 397.4 0 256z"/><path class="fa-primary" d="M224 32c0-17.7 14.3-32 32-32C397.4 0 512 114.6 512 256c0 46.6-12.5 90.4-34.3 128c-8.8 15.3-28.4 20.5-43.7 11.7s-20.5-28.4-11.7-43.7c16.3-28.2 25.7-61 25.7-96c0-106-86-192-192-192c-17.7 0-32-14.3-32-32z"/></svg>
+        </div>
+    @endif
 </section>