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

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