From 2082677cd146bee78bf566c4c2b4fb57e1a5d6a3 Mon Sep 17 00:00:00 2001
From: Alain Kimbu <alainkimbu@gmail.com>
Date: Mon, 24 Aug 2026 16:44:31 +0100
Subject: [PATCH] Phase 2: Add conservative lazy-loading and intrinsic sizes to
 avatars/thumbnails

Add loading="lazy" to list avatars and thumbnails where safe, and add width/height attributes when inline styles already specify sizes to reduce CLS. Leave modal/preview/fullsize images and brand logos unchanged for safety.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 Store.UI/Pages/Customers.cshtml         | 6 +++---
 Store.UI/Pages/Employees.cshtml         | 4 ++--
 Store.UI/Pages/Loyalty.cshtml           | 2 +-
 Store.UI/Pages/Profile.cshtml           | 2 +-
 Store.UI/Pages/Shared/_AppLayout.cshtml | 2 +-
 Store.UI/Pages/Suppliers.cshtml         | 6 +++---
 Store.UI/Pages/Users.cshtml             | 2 +-
 Store.UI/wwwroot/js/site.js             | 2 +-
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/Store.UI/Pages/Customers.cshtml b/Store.UI/Pages/Customers.cshtml
index 46ebf2d..3087908 100644
--- a/Store.UI/Pages/Customers.cshtml
+++ b/Store.UI/Pages/Customers.cshtml
@@ -840,7 +840,7 @@
                                 <div class="crm-avatar-wrap">
                                     @if (!string.IsNullOrEmpty(c.ThumbnailUrl))
                                     {
-                                        <img src="@c.ThumbnailUrl" alt="@c.FullName" class="crm-avatar" />
+                                        <img src="@c.ThumbnailUrl" alt="@c.FullName" class="crm-avatar" loading="lazy" />
                                     }
                                     else
                                     {
@@ -943,7 +943,7 @@
                                     <td>
                                         @if (!string.IsNullOrEmpty(c.ThumbnailUrl))
                                         {
-                                            <img src="@c.ThumbnailUrl" alt="@c.FullName" style="width:32px;height:32px;border-radius:50%;object-fit:cover;" />
+                                            <img src="@c.ThumbnailUrl" alt="@c.FullName" style="width:32px;height:32px;border-radius:50%;object-fit:cover;" loading="lazy" width="32" height="32" />
                                         }
                                         else
                                         {
@@ -1511,7 +1511,7 @@ async function openDrawer(customerId) {
         
         const avatarWrap = document.getElementById('drawerAvatarWrap');
         if (c.thumbnailUrl) {
-            avatarWrap.innerHTML = `<img src="${c.thumbnailUrl}" alt="${c.fullName}" class="crm-avatar" style="width:56px;height:56px;" />`;
+            avatarWrap.innerHTML = `<img src="${c.thumbnailUrl}" alt="${c.fullName}" class="crm-avatar" style="width:56px;height:56px;" loading="lazy" width="56" height="56" />`;
         } else {
             avatarWrap.innerHTML = `<div class="crm-avatar" style="width:56px;height:56px;font-size:1.2rem;">${initials}</div>`;
         }
diff --git a/Store.UI/Pages/Employees.cshtml b/Store.UI/Pages/Employees.cshtml
index 8c6e1c7..e940e4a 100644
--- a/Store.UI/Pages/Employees.cshtml
+++ b/Store.UI/Pages/Employees.cshtml
@@ -73,7 +73,7 @@
                                 <td>
                                     @if (!string.IsNullOrEmpty(e.ThumbnailUrl))
                                     {
-                                        <img src="@e.ThumbnailUrl" alt="Photo" style="width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;" onclick="viewImage('@(e.FullImageUrl ?? e.ThumbnailUrl)')" />
+                                        <img src="@e.ThumbnailUrl" alt="Photo" style="width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;" loading="lazy" width="32" height="32" onclick="viewImage('@(e.FullImageUrl ?? e.ThumbnailUrl)')" />
                                     }
                                     else
                                     {
@@ -360,7 +360,7 @@
                 const initials = (c.fullName || 'EM').split(' ').map(s => s[0]).slice(0, 2).join('');
                 const avatarWrap = document.getElementById('drawerAvatarWrap');
                 if (c.thumbnailUrl) {
-                    avatarWrap.innerHTML = `<img src="${c.thumbnailUrl}" alt="${c.fullName}" class="crm-avatar" style="width:56px;height:56px;object-fit:cover;" />`;
+                    avatarWrap.innerHTML = `<img src="${c.thumbnailUrl}" alt="${c.fullName}" class="crm-avatar" style="width:56px;height:56px;object-fit:cover;" loading="lazy" width="56" height="56" />`;
                 } else {
                     avatarWrap.innerHTML = `<div class="crm-avatar" style="width:56px;height:56px;font-size:1.2rem;">${initials}</div>`;
                 }
diff --git a/Store.UI/Pages/Loyalty.cshtml b/Store.UI/Pages/Loyalty.cshtml
index ced492a..f589eca 100644
--- a/Store.UI/Pages/Loyalty.cshtml
+++ b/Store.UI/Pages/Loyalty.cshtml
@@ -896,7 +896,7 @@
                             <div class="loyalty-card-top">
                                 @if (!string.IsNullOrWhiteSpace(m.ThumbnailUrl))
                                 {
-                                    <img src="@m.ThumbnailUrl" alt="@m.FullName" class="member-avatar" />
+                                    <img src="@m.ThumbnailUrl" alt="@m.FullName" class="member-avatar" loading="lazy" />
                                 }
                                 else
                                 {
diff --git a/Store.UI/Pages/Profile.cshtml b/Store.UI/Pages/Profile.cshtml
index a4bd1ce..c2176c7 100644
--- a/Store.UI/Pages/Profile.cshtml
+++ b/Store.UI/Pages/Profile.cshtml
@@ -196,7 +196,7 @@
             <div class="profile-avatar-wrapper" onclick="document.getElementById('avatarInput').click()">
                 @if (!string.IsNullOrEmpty(Model.CurrentAvatarPath))
                 {
-                    <img src="@Model.CurrentAvatarPath" alt="Avatar" />
+                    <img src="@Model.CurrentAvatarPath" alt="Avatar" loading="lazy" />
                 }
                 else
                 {
diff --git a/Store.UI/Pages/Shared/_AppLayout.cshtml b/Store.UI/Pages/Shared/_AppLayout.cshtml
index 65dddd2..abbaf1c 100644
--- a/Store.UI/Pages/Shared/_AppLayout.cshtml
+++ b/Store.UI/Pages/Shared/_AppLayout.cshtml
@@ -157,7 +157,7 @@
 
             <div class="user-profile-block">
                 <button type="button" class="user-profile-btn" id="userMenuBtn" aria-expanded="false" aria-haspopup="true">
-                    <img src="@avatarUrl" class="user-avatar" alt="@displayName" onerror="this.src='/images/admin.png'" />
+                    <img src="@avatarUrl" class="user-avatar" alt="@displayName" onerror="this.src='/images/admin.png'" loading="lazy" />
                     <div class="user-info">
                         <span class="user-name">@displayName</span>
                         <span class="user-role">@userRole</span>
diff --git a/Store.UI/Pages/Suppliers.cshtml b/Store.UI/Pages/Suppliers.cshtml
index e4118d4..c6d55a2 100644
--- a/Store.UI/Pages/Suppliers.cshtml
+++ b/Store.UI/Pages/Suppliers.cshtml
@@ -901,7 +901,7 @@
                                 <div class="supplier-avatar" style="width:36px; height:36px; font-size:0.85rem;">
                                     @if (!string.IsNullOrEmpty(s.ThumbnailUrl))
                                     {
-                                        <img src="@s.ThumbnailUrl" alt="@s.Name" />
+                                        <img src="@s.ThumbnailUrl" alt="@s.Name" loading="lazy" />
                                     }
                                     else
                                     {
@@ -973,7 +973,7 @@
                             <div class="supplier-avatar">
                                 @if (!string.IsNullOrEmpty(s.ThumbnailUrl))
                                 {
-                                    <img src="@s.ThumbnailUrl" alt="@s.Name" />
+                                    <img src="@s.ThumbnailUrl" alt="@s.Name" loading="lazy" />
                                 }
                                 else
                                 {
@@ -1597,7 +1597,7 @@
 
             const avatarWrap = document.getElementById('drawerAvatarWrap');
             if (p.thumbnailUrl) {
-                avatarWrap.innerHTML = `<img src="${p.thumbnailUrl}" alt="${p.name}" style="width:100%;height:100%;object-fit:cover;" />`;
+                avatarWrap.innerHTML = `<img src="${p.thumbnailUrl}" alt="${p.name}" style="width:100%;height:100%;object-fit:cover;" loading="lazy" />`;
             } else {
                 avatarWrap.innerHTML = `<span>${initials}</span>`;
             }
diff --git a/Store.UI/Pages/Users.cshtml b/Store.UI/Pages/Users.cshtml
index 28aad61..560f8d4 100644
--- a/Store.UI/Pages/Users.cshtml
+++ b/Store.UI/Pages/Users.cshtml
@@ -82,7 +82,7 @@
                                 <td>
                                     @if (!string.IsNullOrEmpty(u.ThumbnailUrl))
                                     {
-                                        <img src="@u.ThumbnailUrl" alt="Avatar" style="width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;" onclick="viewImage('@(u.FullImageUrl ?? u.ThumbnailUrl)')" />
+                                        <img src="@u.ThumbnailUrl" alt="Avatar" style="width:32px;height:32px;border-radius:50%;object-fit:cover;cursor:pointer;" loading="lazy" width="32" height="32" onclick="viewImage('@(u.FullImageUrl ?? u.ThumbnailUrl)')" />
                                     }
                                     else
                                     {
diff --git a/Store.UI/wwwroot/js/site.js b/Store.UI/wwwroot/js/site.js
index 5fa7e16..4496918 100644
--- a/Store.UI/wwwroot/js/site.js
+++ b/Store.UI/wwwroot/js/site.js
@@ -1044,7 +1044,7 @@
             }
 
             const thumbnailHtml = res.thumbnailUrl
-                ? `<img src="${res.thumbnailUrl}" class="scan-entity-img" alt="${res.title}" />`
+                ? `<img src="${res.thumbnailUrl}" class="scan-entity-img" alt="${res.title}" loading="lazy" />`
                 : `<div class="scan-entity-icon-ph">🏷️</div>`;
 
             content.innerHTML = `