Add priority and lazy loading to some images

frontend/components/cart/checkout/Gateway.vue

@@ -22,15 +22,16 @@ const emit = defineEmits<Emits>();
 <template>
     <button
         @click="emit('select', null)"
-        :class="
-            isSelected
-                ? 'ring-2 ring-offset-2 ring-blue-500 border-blue-500'
-                : 'border-slate-200'
-        "
+        :class="isSelected ? 'ring-2 ring-offset-2 ring-blue-500 border-blue-500' : 'border-slate-200'"
         class="w-full p-5 border rounded-xl flex flex-col gap-4 transition-all cursor-pointer relative overflow-hidden"
     >
         <div class="aspect-square flex-center">
-            <NuxtImg :src="gateway.picture" class="object-cover" />
+            <NuxtImg
+                :src="gateway.picture"
+                loading="lazy"
+                fetch-priority="low"
+                class="object-cover"
+            />
         </div>
         <span class="typo-label-sm text-right text-black">
             {{ gateway.title }}
@@ -43,7 +44,11 @@ const emit = defineEmits<Emits>();
                 v-if="isSelected"
                 class="bg-blue-500 rounded-md p-0.5 text-center bottom-4 left-4 text-slate-200 text-[10px] lg:text-xs absolute"
             >
-                <Icon name="bi:check" size="20" class="**:fill-white" />
+                <Icon
+                    name="bi:check"
+                    size="20"
+                    class="**:fill-white"
+                />
             </span>
         </Transition>
     </button>

frontend/components/cart/checkout/PaymentPendingModal.vue

@@ -30,15 +30,11 @@ const visible = computed({
                 class="fixed inset-0 w-full h-svh z-9999 flex-center"
                 v-if="visible"
             >
-                <div
-                    class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]"
-                >
+                <div class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]">
                     <DialogContent
                         class="min-w-[30vw] max-w-[50vw] data-[state=open]:animate-content-show text-black font-iran-yekan-x focus:outline-none z-[100]"
                     >
-                        <div
-                            class="w-full h-[350px] shrink-0 rounded-2xl relative overflow-hidden flex-center"
-                        >
+                        <div class="w-full h-[350px] shrink-0 rounded-2xl relative overflow-hidden flex-center">
                             <div
                                 class="bg-custom-conic size-[200%] absolute -top-1/2 -left-1/2 animate-spin [animation-duration:3s] z-[1]"
                             ></div>
@@ -48,6 +44,8 @@ const visible = computed({
                                 <NuxtImg
                                     class="aspect-square w-[300px]"
                                     src="/img/heymlz/heymlz-payment-progress.gif"
+                                    loading="lazy"
+                                    fetch-priority="low"
                                 />
 
                                 <div class="-translate-y-28 flex-center gap-3">
@@ -55,9 +53,7 @@ const visible = computed({
                                         name="svg-spinners:3-dots-bounce"
                                         size="20"
                                     />
-                                    <span class="text-lg">
-                                        در حال انتقال به درگاه پرداخت
-                                    </span>
+                                    <span class="text-lg"> در حال انتقال به درگاه پرداخت </span>
                                 </div>
                             </div>
                         </div>
@@ -72,15 +68,7 @@ const visible = computed({
 .bg-custom-conic {
     background-size: 100% 100%;
     background-position: 0px 0px, 0px 0px;
-    background-image: radial-gradient(
-            142% 91% at -6% 90%,
-            #ff000000 1%,
-            #ff000000 99%
-        ),
-        conic-gradient(
-            from 0deg at 50% 50%,
-            var(--color-blue-500) 0%,
-            #ff000000 34%
-        );
+    background-image: radial-gradient(142% 91% at -6% 90%, #ff000000 1%, #ff000000 99%),
+        conic-gradient(from 0deg at 50% 50%, var(--color-blue-500) 0%, #ff000000 34%);
 }
 </style>

frontend/components/cart/global/MinimalCartItem.vue

@@ -27,15 +27,19 @@ const { isLoading: cartImageIsLoading } = useImage({
             v-if="!cartImageIsLoading"
             class="size-[3.5rem] shrink-0 rounded-100 border border-gray-300 overflow-hidden"
         >
-            <NuxtImg :src="image" alt="product" class="object-conver" />
+            <NuxtImg
+                :src="image"
+                alt="product"
+                loading="lazy"
+                fetch-priority="low"
+                class="object-conver"
+            />
         </div>
         <Skeleton
             v-else
             class="!size-[3.5rem] aspect-square shrink-0 !rounded-100 border border-slate-200"
         />
-        <span
-            class="text-xs font-semibold lg:text-sm text-gray-800 line-clamp-2"
-        >
+        <span class="text-xs font-semibold lg:text-sm text-gray-800 line-clamp-2">
             {{ title }}
         </span>
     </div>

frontend/components/cart/index/CartItem.vue

@@ -123,6 +123,8 @@ watch(
             >
                 <NuxtImg
                     :src="data.product.image"
+                    loading="lazy"
+                    fetch-priority="low"
                     class="object-cover size-full"
                     alt="product"
                 />