fix: lazy load plugin images

fix: lazy load catalog
This commit is contained in:
Benjamin Nussbaum 2025-11-08 15:45:16 +01:00
parent 5374ff2e95
commit 7808209963
3 changed files with 6 additions and 6 deletions

View file

@ -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" />

View file

@ -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" />

View file

@ -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>