Add priority and lazy loading to some images

frontend/pages/cart/delivery.vue

@@ -61,6 +61,8 @@ const deliveryData = ref<DeliveryData>({
             <div class="flex items-center gap-3 py-3">
                 <NuxtImg
                     src="/img/location.gif"
+                    loading="lazy"
+                    fetch-priority="low"
                     class="size-12 pb-1 -mr-3"
                 />
                 <span class="typo-sub-h-xl -mr-3"> آدرس های شما </span>

frontend/pages/cart/index.vue

@@ -6,7 +6,7 @@ import useGetCartOrders from "~/composables/api/orders/useGetCartOrders";
 // meta
 
 useSeoMeta({
-    title : "سبد خرید"
+    title: "سبد خرید",
 });
 
 definePageMeta({
@@ -22,9 +22,7 @@ const { data: cart, isLoading: cartIsLoading } = useGetCartOrders();
 
 // computed
 
-const hasCartItem = computed(
-    () => !!cart.value && cart.value.items.length! > 0
-);
+const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0);
 </script>
 
 <template>
@@ -38,11 +36,17 @@ const hasCartItem = computed(
                 class="!w-36 !h-[43px] !rounded-lg"
             />
 
-            <div v-else class="flex items-center w-full gap-2 lg:w-1/2">
-                <NuxtImg src="/img/box.gif" class="size-12 pb-2" />
-                <p class="font-semibold lg:text-lg text-black">
-                    {{ cart?.items.length }} مرسوله
-                </p>
+            <div
+                v-else
+                class="flex items-center w-full gap-2 lg:w-1/2"
+            >
+                <NuxtImg
+                    src="/img/box.gif"
+                    loading="lazy"
+                    fetch-priority="low"
+                    class="size-12 pb-2"
+                />
+                <p class="font-semibold lg:text-lg text-black">{{ cart?.items.length }} مرسوله</p>
             </div>
 
             <Skeleton
@@ -53,7 +57,10 @@ const hasCartItem = computed(
             <DeleteCartAllModal v-else />
         </div>
 
-        <ul v-if="cartIsLoading" class="w-full flex flex-col gap-4 lg:gap-6">
+        <ul
+            v-if="cartIsLoading"
+            class="w-full flex flex-col gap-4 lg:gap-6"
+        >
             <Skeleton
                 v-for="i in 4"
                 :key="i"
@@ -61,20 +68,38 @@ const hasCartItem = computed(
             />
         </ul>
 
-        <div v-else class="w-full h-max">
-            <div v-if="!cart?.items.length" class="flex flex-grow w-full">
-                <Placeholder title="سبد خرید شما خالی است :(" icon="bi:cart">
+        <div
+            v-else
+            class="w-full h-max"
+        >
+            <div
+                v-if="!cart?.items.length"
+                class="flex flex-grow w-full"
+            >
+                <Placeholder
+                    title="سبد خرید شما خالی است :("
+                    icon="bi:cart"
+                >
                     <template #actions>
                         <NuxtLink :to="{ name: 'products' }">
-                            <Button class="rounded-full" size="md">
+                            <Button
+                                class="rounded-full"
+                                size="md"
+                            >
                                 <span> مشاهده محصولات </span>
-                                <Icon name="ci:left-rotation" size="24" />
+                                <Icon
+                                    name="ci:left-rotation"
+                                    size="24"
+                                />
                             </Button>
                         </NuxtLink>
                     </template>
                 </Placeholder>
             </div>
-            <ul v-else class="w-full flex flex-col gap-4 lg:gap-6">
+            <ul
+                v-else
+                class="w-full flex flex-col gap-4 lg:gap-6"
+            >
                 <CartItem
                     v-for="(item, index) in cart?.items"
                     :key="index"