Add priority and lazy loading to some images

frontend/pages/article/[id].vue

@@ -38,6 +38,9 @@ if (response.isError) {
                 class="absolute object-cover size-full"
                 :alt="article!.title"
                 :src="article!.cover_image"
+                preload
+                loading="eager"
+                fetch-priority="high"
             />
             <div class="absolute bg-linear-to-t from-black/75 to-transparent size-full" />
             <div class="absolute pl-10 right-10 bottom-10 flex flex-col gap-6">
@@ -62,6 +65,8 @@ if (response.isError) {
                                     class="size-full object-cover absolute"
                                     :src="article!.author.profile_photo"
                                     alt="article-author"
+                                    loading="lazy"
+                                    fetch-priority="low"
                                 />
                             </div>
                             <span class="typo-label-sm">

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"

frontend/pages/index.vue

@@ -22,7 +22,7 @@ if (response.isError) {
 
 <template>
     <div class="w-full">
-        <LoadingOverlay />
+        <!-- <LoadingOverlay /> -->
         <Hero class="mb-20 max-md:mt-[80px]" />
         <Preview />
         <ProductsShowcase class="lg:mb-12" />

frontend/pages/transaction.vue

@@ -7,10 +7,10 @@ import usePersianDate from "~/composables/global/usePersianDate";
 // meta
 
 useSeoMeta({
-        title: "نتیجه تراکنش",
-        description : "",
-        keywords : ""
-})
+    title: "نتیجه تراکنش",
+    description: "",
+    keywords: "",
+});
 
 definePageMeta({
     layout: "none",
@@ -91,6 +91,8 @@ const statusTitle = computed(() => {
                 class="aspect-square w-[220px] md:w-[280px] lg:w-[320px] absolute -top-[70px] md:-top-[110px] lg:-top-[138px] left-1/2 -translate-x-1/2 z-10 [filter:_drop-shadow(0px_4px_20px_rgba(0, 0, 0, 0.15))]"
                 src="/img/heymlz/heymlz-seat.gif"
                 :class="statusVariants.hue_deg"
+                loading="lazy"
+                fetch-priority="low"
             />
 
             <div