From b7ce0b61528303bd37c246f87ee4d5492658dbe3 Mon Sep 17 00:00:00 2001
From: Benjamin Nussbaum <bnussbau@users.noreply.github.com>
Date: Sat, 8 Nov 2025 15:45:16 +0100
Subject: [PATCH] fix: lazy load plugin images

fix: lazy load catalog
---
 resources/views/livewire/catalog/index.blade.php | 4 ++--
 resources/views/livewire/catalog/trmnl.blade.php | 4 ++--
 resources/views/livewire/plugins/index.blade.php | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/views/livewire/catalog/index.blade.php b/resources/views/livewire/catalog/index.blade.php
index 94d0d2a..d796d4f 100644
--- a/resources/views/livewire/catalog/index.blade.php
+++ b/resources/views/livewire/catalog/index.blade.php
@@ -23,7 +23,7 @@ new class extends Component {
 
         $this->catalogPlugins = Cache::remember('catalog_plugins', 43200, function () use ($catalogUrl) {
             try {
-                $response = Http::get($catalogUrl);
+                $response = Http::timeout(10)->get($catalogUrl);
                 $catalogContent = $response->body();
                 $catalog = Yaml::parse($catalogContent);
 
@@ -119,7 +119,7 @@ new class extends Component {
                 <div class="bg-white dark:bg-white/10 border border-zinc-200 dark:border-white/10 [:where(&)]:p-6 [:where(&)]:rounded-xl space-y-6">
                     <div class="flex items-start space-x-4">
                         @if($plugin['logo_url'])
-                            <img src="{{ $plugin['logo_url'] }}" alt="{{ $plugin['name'] }}" class="w-12 h-12 rounded-lg object-cover">
+                            <img src="{{ $plugin['logo_url'] }}" loading="lazy" alt="{{ $plugin['name'] }}" class="w-12 h-12 rounded-lg object-cover">
                         @else
                             <div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                 <flux:icon name="puzzle-piece" class="w-6 h-6 text-gray-400" />
diff --git a/resources/views/livewire/catalog/trmnl.blade.php b/resources/views/livewire/catalog/trmnl.blade.php
index 248ab9f..034bf3b 100644
--- a/resources/views/livewire/catalog/trmnl.blade.php
+++ b/resources/views/livewire/catalog/trmnl.blade.php
@@ -22,7 +22,7 @@ new class extends Component {
     {
         try {
             $this->recipes = Cache::remember('trmnl_recipes_newest', 43200, function () {
-                $response = Http::get('https://usetrmnl.com/recipes.json', [
+                $response = Http::timeout(10)->get('https://usetrmnl.com/recipes.json', [
                     'sort-by' => 'newest',
                 ]);
 
@@ -169,7 +169,7 @@ new class extends Component {
                     <div class="flex items-start space-x-4">
                         @php($thumb = $recipe['icon_url'] ?? $recipe['screenshot_url'])
                         @if($thumb)
-                            <img src="{{ $thumb }}" alt="{{ $recipe['name'] }}" class="w-12 h-12 rounded-lg object-cover">
+                            <img src="{{ $thumb }}" loading="lazy" alt="{{ $recipe['name'] }}" class="w-12 h-12 rounded-lg object-cover">
                         @else
                             <div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center">
                                 <flux:icon name="puzzle-piece" class="w-6 h-6 text-gray-400" />
diff --git a/resources/views/livewire/plugins/index.blade.php b/resources/views/livewire/plugins/index.blade.php
index 1f6c660..4f4da8b 100644
--- a/resources/views/livewire/plugins/index.blade.php
+++ b/resources/views/livewire/plugins/index.blade.php
@@ -286,7 +286,7 @@ new class extends Component {
                     </flux:heading>
                     <flux:subheading>Browse and install Recipes from the community. Add yours <a href="https://github.com/bnussbau/trmnl-recipe-catalog" class="underline" target="_blank">here</a>.</flux:subheading>
                 </div>
-                <livewire:catalog.index />
+                <livewire:catalog.index lazy />
             </div>
         </flux:modal>
 
@@ -297,7 +297,7 @@ new class extends Component {
                         <flux:badge color="yellow" class="ml-2">Alpha</flux:badge>
                     </flux:heading>
                 </div>
-                <livewire:catalog.trmnl />
+                <livewire:catalog.trmnl lazy />
             </div>
         </flux:modal>