feat: add lazy loading to item images for improved performance

Author: MostafaKadry

POS/src/components/sale/BatchSerialDialog.vue

@@ -13,6 +13,7 @@
 								v-if="item.image"
 								:src="item.image"
 								:alt="item.item_name"
+								loading="lazy"
 								class="w-full h-full object-cover"
 							/>
 							<svg v-else class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">

POS/src/components/sale/InvoiceCart.vue

@@ -159,6 +159,7 @@
 								v-if="item.image"
 								:src="item.image"
 								:alt="item.item_name"
+								loading="lazy"
 								class="w-full h-full object-cover"
 							/>
 							<svg

POS/src/components/sale/ItemSelectionDialog.vue

@@ -5,7 +5,7 @@
 				<div v-if="item" class="mb-4">
 					<div class="flex items-center space-x-3 mb-3">
 						<div class="w-12 h-12 bg-gray-100 rounded flex items-center justify-center overflow-hidden flex-shrink-0">
-							<img v-if="item.image" :src="item.image" :alt="item.item_name" class="w-full h-full object-cover" />
+							<img v-if="item.image" :src="item.image" loading="lazy" :alt="item.item_name" class="w-full h-full object-cover" />
 							<svg v-else class="h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
 							</svg>
@@ -28,7 +28,7 @@
 				<div v-else-if="mode === 'variant' && options.length > 0" class="space-y-4">
 					<!-- Display item image and info -->
 					<div class="flex items-center justify-center mb-4">
-						<img v-if="item?.image" :src="item.image" :alt="item.item_name" class="w-32 h-32 object-contain rounded-lg" />
+						<img v-if="item?.image" :src="item.image" loading="lazy" :alt="item.item_name" class="w-32 h-32 object-contain rounded-lg" />
 					</div>
 
 					<!-- Group variants by attributes -->