feat:[lar-156] Add lazy loading in img (#286)

Author: cybersoldattech

resources/views/components/ads.blade.php

@@ -3,6 +3,7 @@
 <div id="laravelcm-ads">
     <a href="{{ $ads['url'] }}" target="_blank" class="block aspect-[2/1] rounded-lg overflow-hidden ring-1 ring-gray-200/50 shadow dark:ring-white/20">
         <img
+            loading="lazy"
             class="size-full object-cover"
             src="{{ asset("/images/ads/{$ads['image']}.png") }}"
             alt="{{ $ads['alt'] }}"

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/discussions/overview.blade.php

@@ -51,6 +51,7 @@ class="text-gray-700 dark:text-gray-300 font-medium hover:underline"
                 <div class="flex items-center justify-center gap-2">
                     @foreach ($discussion->getReactionsSummary() as $reaction)
                         <img
+                            loading="lazy"
                             class="size-4"
                             src="{{ asset("/images/reactions/{$reaction->name}.svg") }}"
                             alt="{{ $reaction->name }} emoji"

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/join-sponsors.blade.php

@@ -10,11 +10,13 @@
         <div class="flex items-center justify-center px-2">
             <a href="https://laravelshopper.dev" target="_blank" class="flex items-center">
                 <img
+                    loading="lazy"
                     class="h-12 dark:hidden"
                     src="{{ asset('/images/sponsors/shopper-logo.svg') }}"
                     alt="Laravel Shopper"
                 />
                 <img
+                    loading="lazy"
                     class="hidden h-12 dark:block"
                     src="{{ asset('/images/sponsors/shopper-logo-light.svg') }}"
                     alt="Laravel Shopper"

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/profile-users.blade.php

@@ -1,6 +1,7 @@
 <div class="flex justify-center -space-x-2 overflow-hidden py-1">
     @foreach ($users as $user)
         <img
+            loading="lazy"
             class="inline-block size-8 rounded-full ring-2 ring-white"
             src="{{ $user->profile_photo_url }}"
             alt="{{ $user->username }} avatar"

resources/views/components/sponsors.blade.php

@@ -5,11 +5,13 @@
     <div class="mt-5 space-y-5">
         <a href="https://laravelshopper.dev" class="flex items-center justify-end">
             <img
+                loading="lazy"
                 class="logo-white h-10"
                 src="{{ asset('/images/sponsors/shopper-logo.svg') }}"
                 alt="Laravel Shopper"
             />
             <img
+                loading="lazy"
                 class="logo-dark h-10"
                 src="{{ asset('/images/sponsors/shopper-logo-light.svg') }}"
                 alt="Laravel Shopper"

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/articles/single-post.blade.php

@@ -97,6 +97,7 @@ class="size-6 ring-1 ring-offset-2 ring-gray-200 ring-offset-gray-50 dark:ring-w
                     <div class="mt-4 lg:mt-0 lg:col-span-2">
                         <div class="relative aspect-[16/9] lg:aspect-[2/1] rounded-xl shadow-lg overflow-hidden">
                             <img
+                                loading="lazy"
                                 class="object-cover size-full"
                                 src="{{ $media }}"
                                 alt="{{ $article->title }}"

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"

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

@@ -59,11 +59,13 @@
                     <div class="mt-4 flex flex-wrap items-center gap-6">
                         <a href="https://laravelshopper.dev" target="_blank" class="flex items-center">
                             <img
+                                loading="lazy"
                                 class="h-10 dark:hidden"
                                 src="{{ asset('/images/sponsors/shopper-logo.svg') }}"
                                 alt="Laravel Shopper"
                             />
                             <img
+                                loading="lazy"
                                 class="hidden h-10 dark:block"
                                 src="{{ asset('/images/sponsors/shopper-logo-light.svg') }}"
                                 alt="Laravel Shopper"

resources/views/livewire/reactions.blade.php

@@ -44,6 +44,7 @@ class="size-5 text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:gr
                 <div class="flex items-center justify-center space-x-2">
                     @foreach ($model->getReactionsSummary() as $reaction)
                         <img
+                            loading="lazy"
                             class="size-4"
                             src="{{ asset("/images/reactions/{$reaction->name}.svg") }}"
                             alt="{{ $reaction->name }} emoji"
@@ -73,28 +74,28 @@ class="absolute z-30 left-6 w-auto origin-top-left"
         <div class="rounded-full bg-white ring-1 ring-inset ring-gray-100 px-3 py-1.5 dark:bg-gray-800 dark:ring-white/10">
             <div class="reactions flex items-center gap-4">
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('clap')">
-                    <img src="{{ asset('/images/reactions/clap.svg') }}" class="size-5" alt="clap emoji" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/clap.svg') }}" class="size-5" alt="clap emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('fire')">
-                    <img src="{{ asset('/images/reactions/fire.svg') }}" class="size-5" alt="fire emoji" />
+                    <img loading="lazy"  src="{{ asset('/images/reactions/fire.svg') }}" class="size-5" alt="fire emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('handshake')">
-                    <img src="{{ asset('/images/reactions/handshake.svg') }}" class="size-5" alt="handshake emoji" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/handshake.svg') }}" class="size-5" alt="handshake emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('joy')">
-                    <img src="{{ asset('/images/reactions/joy.svg') }}" class="size-5" alt="joy emoji" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/joy.svg') }}" class="size-5" alt="joy emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('love')">
-                    <img src="{{ asset('/images/reactions/love.svg') }}" class="size-5" alt="love emoji" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/love.svg') }}" class="size-5" alt="love emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('money')">
-                    <img src="{{ asset('/images/reactions/money.svg') }}" class="size-5" alt="money emoji" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/money.svg') }}" class="size-5" alt="money emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('party')">
-                    <img src="{{ asset('/images/reactions/party.svg') }}" class="size-5" alt="party emoji" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/party.svg') }}" class="size-5" alt="party emoji" />
                 </button>
                 <button type="button" class="{{ $buttonClasses }}" wire:click="userReacted('pray')">
-                    <img src="{{ asset('/images/reactions/pray.svg') }}" class="size-5" alt="pray" />
+                    <img loading="lazy" src="{{ asset('/images/reactions/pray.svg') }}" class="size-5" alt="pray" />
                 </button>
             </div>
         </div>

resources/views/vendor/mail/html/header.blade.php

@@ -2,7 +2,7 @@
     <td class="header">
         <a href="{{ $url }}" style="display: inline-block">
             @if (trim($slot) === 'Laravel')
-                <img src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Cameroun logo" />
+                <img loading="lazy" src="https://laravel.com/img/notification-logo.png" class="logo" alt="Laravel Cameroun logo" />
             @else
                 {{ $slot }}
             @endif