feat:[lar-156] Add lazy loading in img

Author: cybersoldattech

resources/views/components/articles/card-author.blade.php

@@ -11,6 +11,7 @@
 <article class="relative" wire:key="{{ $article->slug }}">
     <div class="relative w-full">
         <img
+            loading="lazy"
             src="{{ $media }}"
             alt="{{ $article->title }}"
             class="aspect-[16/9] w-full rounded-2xl bg-gray-100 object-cover sm:aspect-[2/1] dark:bg-gray-800"

resources/views/components/articles/card.blade.php

@@ -16,6 +16,7 @@
     @if(! $isSummary)
         <div class="aspect-[2/1] w-full rounded-lg bg-gray-100 overflow-hidden shadow-sm transition group-hover:opacity-80">
             <img
+                loading="lazy"
                 class="rounded-lg object-cover shadow-sm group-hover:opacity-75"
                 src="{{ $media }}"
                 alt="{{ $article->title }}"

resources/views/components/articles/overview.blade.php

@@ -15,6 +15,7 @@ class="space-y-4 lg:grid lg:grid-cols-3 lg:items-start lg:gap-6 lg:space-y-0"
     <x-link :href="route('articles.show', $article)" class="group">
         <div class="aspect-h-2 aspect-w-3">
             <img
+                loading="lazy"
                 class="rounded-lg object-cover shadow-lg group-hover:opacity-75"
                 src="{{ $media }}"
                 alt="{{ $article->title }}"

resources/views/components/dropdown-profile.blade.php

@@ -60,8 +60,8 @@ class="group flex items-center gap-2 py-1.5 text-sm font-medium text-gray-500 da
                     role="menuitem"
                     tabindex="-1"
                 >
-                    <img class="size-5 object-cover" src="{{ asset('images/filament-icon.png') }}" alt="Filament icon" />
-                    Administration
+                    <img loading="lazy"  class="size-5 object-cover" src="{{ asset('images/filament-icon.png') }}" alt="Filament icon" />
+                    {{ __('Administration') }}
                 </x-link>
             </div>
         @endif

resources/views/components/feeds/comment.blade.php

@@ -2,6 +2,7 @@
     <div class="relative flex items-start space-x-3">
         <div class="relative">
             <img
+                loading="lazy"
                 class="flex size-10 items-center justify-center rounded-full bg-white dark:bg-gray-800 ring-4 ring-white dark:ring-white/10"
                 src="{{ $user->profile_photo_url }}"
                 alt="Avatar de {{ $user->username }}"

resources/views/components/layouts/footer.blade.php

@@ -11,6 +11,7 @@
                         </a>
                         <span class="ml-1.5">{{ __('global.by') }} Caneco</span>
                         <img
+                            loading="lazy"
                             class="ml-2 size-6 rounded-full"
                             src="https://avatars.githubusercontent.com/u/502041"
                             alt="Caneco avatar"

resources/views/components/layouts/header.blade.php

@@ -20,10 +20,10 @@ class="group inline-flex items-center"
         @if(isHolidayWeek())
             <div class="relative">
                 <div class="absolute z-0 lg:left-1/4">
-                    <img src="{{ asset('images/decoration.gif') }}" class="w-auto h-10" alt="Christmas decoration">
+                    <img loading="lazy" src="{{ asset('images/decoration.gif') }}" class="w-auto h-10" alt="Christmas decoration">
                 </div>
                 <div class="absolute z-0 lg:right-12">
-                    <img src="{{ asset('images/decoration.gif') }}" class="w-auto h-10" alt="Christmas decoration">
+                    <img loading="lazy" src="{{ asset('images/decoration.gif') }}" class="w-auto h-10" alt="Christmas decoration">
                 </div>
             </div>
         @endif

resources/views/components/user/avatar.blade.php

@@ -7,6 +7,7 @@
 @if ($user->is_sponsor)
     <span @class(['relative inline-block', $container])>
         <img
+            loading="lazy"
             {{ $attributes->twMerge(['class' => 'object-cover bg-gray-100 dark:bg-gray-900 rounded-full ring-2 !ring-flag-yellow']) }}
             src="{{ $user->profile_photo_url }}"
             alt="{{ $user->username() }}"
@@ -28,6 +29,7 @@ class="size-full text-yellow-500"
     </span>
 @else
     <img
+        loading="lazy"
         {{ $attributes->merge(['class' => 'object-cover rounded-full bg-gray-100 dark:bg-gray-900']) }}
         src="{{ $user->profile_photo_url }}"
         alt="{{ $user->username() }}"

resources/views/livewire/pages/about.blade.php

@@ -150,6 +150,7 @@ class="mt-2 block text-2xl font-extrabold tracking-tight sm:text-3xl xl:text-4xl
                     <div class="mt-14 columns-2 gap-4 sm:columns-3 lg:mt-0">
                         <div class="relative">
                             <img
+                                loading="lazy"
                                 src="https://res.cloudinary.com/dlzdb3m6n/image/upload/v1703778123/IMG_1637_yjaqrk.jpg"
                                 alt=""
                                 class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
@@ -160,6 +161,7 @@ class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gr
                         </div>
                         <div class="relative">
                             <img
+                                loading="lazy"
                                 src="https://res.cloudinary.com/dlzdb3m6n/image/upload/v1703778121/IMG_1505_j06cwz.jpg"
                                 alt=""
                                 class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg lg:aspect-[1/2]"
@@ -170,6 +172,7 @@ class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gr
                         </div>
                         <div class="relative">
                             <img
+                                loading="lazy"
                                 src="https://res.cloudinary.com/dlzdb3m6n/image/upload/v1703778122/IMG_1609_otohw5.jpg"
                                 alt=""
                                 class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg lg:aspect-[2/5]"
@@ -180,6 +183,7 @@ class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gr
                         </div>
                         <div class="relative">
                             <img
+                                loading="lazy"
                                 src="https://res.cloudinary.com/dlzdb3m6n/image/upload/v1703778121/IMG_1605_zdgdpv.jpg"
                                 alt=""
                                 class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg lg:aspect-[4/5]"
@@ -190,6 +194,7 @@ class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gr
                         </div>
                         <div class="relative">
                             <img
+                                loading="lazy"
                                 src="https://res.cloudinary.com/dlzdb3m6n/image/upload/v1703778122/IMG_1567_hfy747.jpg"
                                 alt=""
                                 class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg"
@@ -200,6 +205,7 @@ class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gr
                         </div>
                         <div class="relative">
                             <img
+                                loading="lazy"
                                 src="https://res.cloudinary.com/dlzdb3m6n/image/upload/v1703782759/phnnfnzxt8khtrth4qem.jpg"
                                 alt=""
                                 class="aspect-[2/3] w-full rounded-xl bg-gray-900/5 object-cover shadow-lg lg:aspect-[3/7]"
@@ -232,7 +238,7 @@ class="space-y-12 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 sm:space-y-0 lg:
                             @foreach($profiles as $profile)
                                 <li>
                                     <div class="space-y-4">
-                                        <img class="h-16 w-16 rounded-full lg:h-20 lg:w-20" src="{{ $profile['avatar'] }}" alt="{{ $profile['name'] }}" />
+                                        <img loading="lazy" class="h-16 w-16 rounded-full lg:h-20 lg:w-20" src="{{ $profile['avatar'] }}" alt="{{ $profile['name'] }}" />
                                         <div class="space-y-1 text-lg font-medium leading-6 text-gray-900">
                                             <h3>{{ $profile['name'] }}</h3>
                                             <p class="font-sans text-base text-green-600">{{ $profile['title'] }}</p>

resources/views/livewire/pages/home.blade.php

@@ -174,6 +174,7 @@ class="font-medium text-flag-green hover:text-green-500 hover:underline"
             <div class="h-full w-full xl:grid xl:grid-cols-2">
                 <div class="h-full xl:relative xl:col-start-2">
                     <img
+                        loading="lazy"
                         class="h-full w-full object-cover opacity-25 xl:absolute xl:inset-0"
                         src="{{ asset('/images/developer.jpg') }}"
                         alt="Developer working on laptop"