mkrieger/byos_laravel
1
0
Fork 0
mirror of https://github.com/usetrmnl/byos_laravel.git synced 2026-01-13 15:07:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: lazy load plugin images

Browse source 
fix: lazy load catalog
This commit is contained in:
Benjamin Nussbaum 2025-11-08 15:45:16 +01:00
parent cdf477e2ed
commit b7ce0b6152
3 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
resources/views/livewire/catalog/index.blade.php
View file

@ -23,7 +23,7 @@ new class extends Component {
$this->catalogPlugins = Cache::remember('catalog_plugins', 43200, function () use ($catalogUrl) { $this->catalogPlugins = Cache::remember('catalog_plugins', 43200, function () use ($catalogUrl) {
try { try {
$response = Http::get($catalogUrl); $response = Http::timeout(10)->get($catalogUrl);
$catalogContent = $response->body(); $catalogContent = $response->body();
$catalog = Yaml::parse($catalogContent); $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="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"> <div class="flex items-start space-x-4">
@if($plugin['logo_url']) @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 @else
<div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center"> <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" /> <flux:icon name="puzzle-piece" class="w-6 h-6 text-gray-400" />

4
resources/views/livewire/catalog/trmnl.blade.php
View file

@ -22,7 +22,7 @@ new class extends Component {
{ {
try { try {
$this->recipes = Cache::remember('trmnl_recipes_newest', 43200, function () { $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', 'sort-by' => 'newest',
]); ]);
@ -169,7 +169,7 @@ new class extends Component {
<div class="flex items-start space-x-4"> <div class="flex items-start space-x-4">
@php($thumb = $recipe['icon_url'] ?? $recipe['screenshot_url']) @php($thumb = $recipe['icon_url'] ?? $recipe['screenshot_url'])
@if($thumb) @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 @else
<div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-lg flex items-center justify-center"> <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" /> <flux:icon name="puzzle-piece" class="w-6 h-6 text-gray-400" />

4
resources/views/livewire/plugins/index.blade.php
View file

@ -286,7 +286,7 @@ new class extends Component {
</flux:heading> </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> <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> </div>
<livewire:catalog.index /> <livewire:catalog.index lazy />
</div> </div>
</flux:modal> </flux:modal>
@ -297,7 +297,7 @@ new class extends Component {
<flux:badge color="yellow" class="ml-2">Alpha</flux:badge> <flux:badge color="yellow" class="ml-2">Alpha</flux:badge>
</flux:heading> </flux:heading>
</div> </div>
<livewire:catalog.trmnl /> <livewire:catalog.trmnl lazy />
</div> </div>
</flux:modal> </flux:modal>