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="
+        :class="isSelected ? 'ring-2 ring-offset-2 ring-blue-500 border-blue-500' : 'border-slate-200'"
-            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
+                <div class="overflow-y-auto max-h-svh absolute left-[50%] py-10 w-fit max-w-[50rem] translate-x-[-50%]">
-                    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
+                        <div class="w-full h-[350px] shrink-0 rounded-2xl relative overflow-hidden flex-center">
-                            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 class="text-lg"> در حال انتقال به درگاه پرداخت </span>
-                                        در حال انتقال به درگاه پرداخت
-                                    </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(
+    background-image: radial-gradient(142% 91% at -6% 90%, #ff000000 1%, #ff000000 99%),
-            142% 91% at -6% 90%,
+        conic-gradient(from 0deg at 50% 50%, var(--color-blue-500) 0%, #ff000000 34%);
-            #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
+        <span class="text-xs font-semibold lg:text-sm text-gray-800 line-clamp-2">
-            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"
                 />

frontend/components/global/AvatarGroup.vue

@@ -38,6 +38,8 @@ const remaining = computed(() => items.value.length - max.value);
         >
             <NuxtImg
                 :src="item"
+                loading="lazy"
+                fetch-priority="low"
                 alt="avatar"
                 class="rounded-full object-cover w-full h-full"
             />

frontend/components/global/BlogPost.vue

@@ -51,6 +51,8 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
 
             <NuxtImg
                 :src="image"
+                loading="lazy"
+                fetch-priority="low"
                 class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
                 alt=""
             />
@@ -98,6 +100,8 @@ const createdAt = usePersianTimeAgo(new Date(date.value));
 
         <NuxtImg
             v-if="variant === 'lg'"
+            loading="lazy"
+            fetch-priority="low"
             :src="image"
             class="group-hover:scale-105 transition-transform duration-200 absolute size-full object-cover z-10"
             alt=""

frontend/components/global/Brands.vue

@@ -41,6 +41,8 @@ const brands = ref([
                         HEYMLZ
                     </div>
                     <NuxtImg
+                        loading="lazy"
+                        fetch-priority="low"
                         src="/img/heymlz/heymlz-logo.png"
                         class="h-[25px] sm:h-[45px] invert"
                     />
@@ -62,6 +64,8 @@ const brands = ref([
                     class="flex items-center px-6 sm:px-10 h-[90px] sm:h-[140px]"
                 >
                     <NuxtImg
+                        loading="lazy"
+                        fetch-priority="low"
                         :src="brand"
                         class="h-[25px] sm:h-[45px] opacity-25"
                     />
@@ -70,23 +74,3 @@ const brands = ref([
         </div>
     </div>
 </template>
-<!-- <NuxtImg
-src="/img/brands/brand-2.png"
-class="h-[25px] sm:h-[45px]"
-/>
-<NuxtImg
-src="/img/brands/brand-3.png"
-class="h-[25px] sm:h-[45px]"
-/>
-<NuxtImg
-src="/img/brands/brand-4.png"
-class="h-[25px] sm:h-[45px]"
-/>
-<NuxtImg
-src="/img/brands/brand-5.png"
-class="h-[25px] sm:h-[45px]"
-/>
-<NuxtImg
-src="/img/brands/brand-6.png"
-class="h-[25px] sm:h-[45px]"
-/> -->

frontend/components/global/CategoryCard.vue

@@ -44,6 +44,8 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
                     :id="`category-image-${id}`"
                     class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
                     :src="picture"
+                    loading="lazy"
+                    fetch-priority="low"
                     alt=""
                 />
             </Transition>

frontend/components/global/Footer.vue

@@ -3,6 +3,8 @@
         <NuxtImg
             src="/img/footer-bg.jpg"
             alt=""
+            loading="lazy"
+            fetch-priority="low"
             class="absolute z-10 object-cover opacity-45"
             :style="{
                 mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0)  100%',
@@ -13,6 +15,8 @@
             <div class="flex items-center flex-col gap-8 pb-[10px] pt-[80px] lg:pt-[100px] lg:pb-[50px] justify-center">
                 <img
                     src="/img/heymlz/heymlz-small-idle.gif"
+                    loading="lazy"
+                    fetch-priority="low"
                     class="size-[150px] lg:size-[220px] rounded-full drop-shadow-2xl"
                 />
                 <span class="font-bold text-2xl lg:text-5xl text-gradient bg-gradient-to-l from-blue-500 to-blue-700">

frontend/components/global/Header.vue

@@ -124,6 +124,9 @@ const isHomePage = computed(() => route.path === "/");
             <div class="header-navbar-item flex items-center justify-end h-full">
                 <NuxtImg
                     src="/img/heymlz/heymlz-logomotion.gif"
+                    preload
+                    loading="eager"
+                    fetch-priority="high"
                     class="h-2/3"
                 />
             </div>

frontend/components/global/ServiceHighlights.vue

@@ -35,24 +35,26 @@ const highlights = ref<Highlight[]>([
 
 <template>
     <section class="w-full border-t-[0.5px] border-slate-200">
-        <div
+        <div class="w-full py-[3rem] lg:py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4">
-            class="w-full py-[3rem] lg:py-[5rem] gap-8 sm:gap-12 xl:gap-0 container grid grid-cols-2 lg:grid-cols-4"
+            <template
+                v-for="(highlight, index) in highlights"
+                :key="index"
             >
-            <template v-for="(highlight, index) in highlights" :key="index">
                 <div class="flex flex-col-center gap-[.75rem] px-5">
                     <div class="size-[70px] md:size-[100px] flex-center">
-                        <NuxtImg :src="highlight.icon" class="w-full" />
+                        <NuxtImg
+                            :src="highlight.icon"
+                            loading="lazy"
+                            fetch-priority="low"
+                            class="w-full"
+                        />
                     </div>
 
                     <div class="w-full flex-col-center gap-[.25rem]">
-                        <span
+                        <span class="typo-sub-h-sm lg:typo-sub-h-md text-black text-center">
-                            class="typo-sub-h-sm lg:typo-sub-h-md text-black text-center"
-                        >
                             {{ highlight.title }}
                         </span>
-                        <p
+                        <p class="text-slate-500 typo-p-xs lg:typo-p-sm mt-1 text-center">
-                            class="text-slate-500 typo-p-xs lg:typo-p-sm mt-1 text-center"
-                        >
                             {{ highlight.description }}
                         </p>
                     </div>

frontend/components/global/product-detail/Slider.vue

@@ -90,6 +90,8 @@ const changeSlide = (id: number) => {
                             <NuxtImg
                                 class="absolute object-cover size-full"
                                 :src="slide.image"
+                                loading="lazy"
+                                fetch-priority="low"
                                 :alt="String(slide.id)"
                             />
                         </div>

frontend/components/global/product/ProductCard.vue

@@ -67,6 +67,8 @@ const parallaxStyle = computed(() => {
                     <NuxtImg
                         :id="`product-image-${id}`"
                         :src="picture"
+                        loading="lazy"
+                        fetch-priority="low"
                         class="group-hover:scale-105 transition-transform duration-200 size-full object-contain absolute inset-0"
                         alt="product-background"
                     />

frontend/components/home/Categories.vue

@@ -42,6 +42,8 @@ const onSlideChange = (swiper: SwiperClass) => {
                 :style="{
                     filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
                 }"
+                loading="lazy"
+                fetch-priority="low"
                 src="/img/heymlz/heymlz-category-seat.gif"
             />
             <Swiper

frontend/components/home/Hero.vue

@@ -214,6 +214,9 @@ onUnmounted(() => {
 
                             <NuxtImg
                                 v-else
+                                preload
+                                loading="eager"
+                                fetch-priority="high"
                                 class="absolute inset-0 size-full object-cover"
                                 :src="slide.image!"
                                 :alt="slide.title"
@@ -265,6 +268,8 @@ onUnmounted(() => {
                                                         filter: 'drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.4))',
                                                     }"
                                                     src="/img/heymlz/heymlz-seat.gif"
+                                                    loading="lazy"
+                                                    fetch-priority="low"
                                                 />
 
                                                 <Button

frontend/components/home/MostRecentComments.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -7,7 +6,7 @@ import type { SwiperClass } from "swiper/react";
 
 // types
 
-type Props = {}
+type Props = {};
 
 // props
 
@@ -23,7 +22,6 @@ const swiper_instance = ref<SwiperClass | null>(null);
 const onSwiper = (swiper: SwiperClass) => {
     swiper_instance.value = swiper;
 };
-
 </script>
 
 <template>
@@ -31,6 +29,8 @@ const onSwiper = (swiper: SwiperClass) => {
         <NuxtImg
             class="absolute size-full object-cover"
             src="/img/hero-bg.jpg"
+            loading="lazy"
+            fetch-priority="low"
             alt=""
         />
         <div class="absolute bg-black/60 size-full z-10" />
@@ -50,15 +50,18 @@ const onSwiper = (swiper: SwiperClass) => {
                 >
                     <div class="flex justify-center items-center">
                         <div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
-                            <Icon name="ci:instagram" size="28" class="**:stroke-white" />
+                            <Icon
-                            <p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
+                                name="ci:instagram"
-                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
+                                size="28"
-                                استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
+                                class="**:stroke-white"
-                                در ستون و سطرآنچنان که لازم.
+                            />
+                            <p
+                                class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-normal !leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center"
+                            >
+                                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک
+                                است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.
                             </p>
-                            <span class="typo-p-sm md:typo-p-xl text-center">
+                            <span class="typo-p-sm md:typo-p-xl text-center"> - منصور مرزبان </span>
-                                 - منصور مرزبان
-                            </span>
                         </div>
                     </div>
                 </SwiperSlide>
@@ -69,10 +72,8 @@ const onSwiper = (swiper: SwiperClass) => {
                     v-for="(i, index) in 6"
                     :class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
                     class="border border-white size-1.5 md:size-2 rounded-full transition-all duration-200"
-                >
+                ></div>
             </div>
         </div>
-
-        </div>
     </div>
 </template>

frontend/components/home/Preview.vue

@@ -88,6 +88,8 @@ watch(
                         :src="homeData!.difreance_section.image1"
                         class="select-none absolute size-full object-cover transition-[filter] duration-250 brightness-[95%]"
                         :alt="homeData!.difreance_section.title1"
+                        loading="lazy"
+                        fetch-priority="low"
                     />
                     <video
                         v-else
@@ -110,6 +112,8 @@ watch(
                             :src="homeData!.difreance_section.image2"
                             class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250 brightness-[95%]"
                             :alt="homeData!.difreance_section.title2"
+                            loading="lazy"
+                            fetch-priority="low"
                         />
                         <video
                             v-else
@@ -126,9 +130,7 @@ watch(
                         :style="{
                             left: `${clipPathPercent}%`,
                         }"
-                        :class="[
+                        :class="[activeSlideVideo !== 'none' ? 'opacity-10' : '']"
-                            activeSlideVideo !== 'none' ? 'opacity-10' : '',
-                        ]"
                         class="select-none w-[5px] sm:w-2 bg-black h-full absolute left-0 flex items-center justify-center transition-opacity duration-250"
                     >
                         <div
@@ -143,9 +145,7 @@ watch(
                     </div>
                 </div>
 
-                <div
+                <div class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity">
-                    class="absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end transition-opacity"
-                >
                     <div
                         class="flex flex-col gap-2 text-black transition-opacity"
                         :class="activeSlideVideo === 'right' ? 'opacity-0' : ''"

frontend/components/home/ProductsShowcase.vue

@@ -106,6 +106,8 @@ const childImageVariants = {
                     <NuxtImg
                         :src="slide.background_image"
                         class="absolute size-full object-cover"
+                        loading="lazy"
+                        fetch-priority="low"
                     />
                 </motion.div>
             </template>
@@ -133,6 +135,8 @@ const childImageVariants = {
                             <NuxtImg
                                 class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20 mt-40"
                                 :src="slide.image3"
+                                loading="lazy"
+                                fetch-priority="low"
                                 alt=""
                             />
                         </motion.div>
@@ -144,6 +148,8 @@ const childImageVariants = {
                             <NuxtImg
                                 class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20"
                                 :src="slide.image2"
+                                loading="lazy"
+                                fetch-priority="low"
                                 alt=""
                             />
                         </motion.div>
@@ -155,6 +161,8 @@ const childImageVariants = {
                             <NuxtImg
                                 class="w-[130px] sm:w-[180px] lg:w-[250px] xl:w-[300px] z-20 mt-40"
                                 :src="slide.image1"
+                                loading="lazy"
+                                fetch-priority="low"
                                 alt=""
                             />
                         </motion.div>
@@ -222,6 +230,8 @@ const childImageVariants = {
                         >
                             <NuxtImg
                                 src="/img/heymlz/heymlz-falling.gif"
+                                loading="lazy"
+                                fetch-priority="low"
                                 class="absolute top-[101px] sm:top-[100px] lg:top-[117px] left-1/2 -translate-1/2 w-[200px] lg:w-[250px] drop-shadow-md"
                             />
                             <Button

frontend/components/product/ChatBox/ChatBoxContainer.vue

@@ -187,6 +187,8 @@ whenever(
                         <NuxtImg
                             class="size-[225px] sm:size-[250px] drop-shadow-2xl"
                             src="/img/heymlz/heymlz-small-idle.gif"
+                            loading="lazy"
+                            fetch-priority="low"
                             alt=""
                         />
                     </div>
@@ -199,6 +201,8 @@ whenever(
                 <NuxtImg
                     class="size-[225px] sm:size-[250px] drop-shadow-2xl"
                     src="/img/heymlz/heymlz-small-idle.gif"
+                    loading="lazy"
+                    fetch-priority="low"
                     alt=""
                 />
                 <div class="flex flex-col gap-4 items-center">

frontend/components/product/ChatBox/ChatMessage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import useGetAccount from '~/composables/api/account/useGetAccount';
+import useGetAccount from "~/composables/api/account/useGetAccount";
 
 // types
 
@@ -85,31 +85,34 @@ onMounted(() => {
                     src="/img/heymlz/heymlz-full-body.jpg"
                     class="size-full object-cover absolute"
                     alt="profile"
+                    loading="lazy"
+                    fetch-priority="low"
                 />
                 <NuxtImg
                     v-else
                     :src="account?.profile_photo ?? ''"
                     class="size-full object-cover absolute"
+                    loading="lazy"
+                    fetch-priority="low"
                     alt="profile"
                 />
             </div>
             <div
                 class="rounded-150 px-4 py-3 whitespace-pre-wrap overflow-hidden"
-                :class="
+                :class="reverse ? 'bg-slate-100 text-slate-600' : 'bg-black text-white'"
-                    reverse
-                        ? 'bg-slate-100 text-slate-600'
-                        : 'bg-black text-white'
-                "
             >
                 <div
                     v-if="!loadingContent"
                     :id="`chat-message-content-${id}`"
                     class="typo-p-sm font-normal whitespace-pre-wrap"
                     v-html="content"
-                >
+                ></div>
-                </div>
 
-                <Icon v-else name="svg-spinners:3-dots-bounce" size="20" />
+                <Icon
+                    v-else
+                    name="svg-spinners:3-dots-bounce"
+                    size="20"
+                />
             </div>
         </div>
     </div>

frontend/components/product/ProductComments.vue

@@ -127,6 +127,8 @@ const limitedComments = computed(() => {
                 >
                     <NuxtImg
                         src="/img/heymlz/heymlz-contact-us.gif"
+                        loading="lazy"
+                        fetch-priority="low"
                         class="w-[200px] lg:w-[300px] translate-y-[-25px]"
                     />
                     <span class="text-xl text-black font-semibold translate-y-[-25px]"> هیچ نظری ثبت نشده است </span>

frontend/components/product/ProductDetails.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-
 // import
 
 import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
@@ -7,7 +6,6 @@ import type { ProductVariantProvideType } from "~/pages/product/[id].vue";
 // provide / inject
 
 const { selectedVariant } = inject("productVariant") as ProductVariantProvideType;
-
 </script>
 
 <template>
@@ -20,25 +18,21 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
                 <Accordion />
             </div>
             <div class="w-full lg:w-[450px] xl:w-[600px]">
-                <div
+                <div class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]">
-                    class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]"
-                >
                     <span class="typo-h-6 mb-8">داخل جعبه چیه؟</span>
-                    <div
+                    <div class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]">
-                        class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]"
-                    >
                         <div
                             v-for="inPackItem in selectedVariant!.in_pack_items"
                             class="w-full flex-col-center gap-[.75rem]"
                         >
-                            <div
+                            <div class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center">
-                                class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
-                            >
                                 <div class="size-11 relative">
                                     <NuxtImg
                                         class="size-full absolute object-cover"
                                         :src="inPackItem.cover"
                                         :alt="inPackItem.item_title"
+                                        loading="lazy"
+                                        fetch-priority="low"
                                     />
                                 </div>
                             </div>

frontend/components/profile/tickets/[id]/TicketBubble.vue

@@ -38,9 +38,7 @@ const profile = computed(() => {
 });
 
 const username = computed(() => {
-    return is_user.value
+    return is_user.value ? `${account.value?.first_name} ${account.value?.last_name}` : "ادمین پشتیبانی هی ملز";
-        ? `${account.value?.first_name} ${account.value?.last_name}`
-        : "ادمین پشتیبانی هی ملز";
 });
 </script>
 
@@ -54,7 +52,12 @@ const username = computed(() => {
             :class="is_user ? 'rounded-br-none' : 'rounded-bl-none'"
         >
             <div class="w-2/12 flex items-start justify-start">
-                <NuxtImg :src="profile" class="size-16 rounded-full" />
+                <NuxtImg
+                    :src="profile"
+                    loading="lazy"
+                    fetch-priority="low"
+                    class="size-16 rounded-full"
+                />
             </div>
 
             <div class="w-10/12 flex flex-col items-start pt-2">
@@ -65,9 +68,7 @@ const username = computed(() => {
                     >
                         {{ timeAgo }}
                     </p>
-                    <p
+                    <p class="text-xs font-semibold text-dynamic-secondary line-clamp-1">
-                        class="text-xs font-semibold text-dynamic-secondary line-clamp-1"
-                    >
                         {{ username }}
                     </p>
                 </div>

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(
+const hasCartItem = computed(() => !!cart.value && cart.value.items.length! > 0);
-    () => !!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">
+            <div
-                <NuxtImg src="/img/box.gif" class="size-12 pb-2" />
+                v-else
-                <p class="font-semibold lg:text-lg text-black">
+                class="flex items-center w-full gap-2 lg:w-1/2"
-                    {{ cart?.items.length }} مرسوله
+            >
-                </p>
+                <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
-            <div v-if="!cart?.items.length" class="flex flex-grow w-full">
+            v-else
-                <Placeholder title="سبد خرید شما خالی است :(" icon="bi:cart">
+            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

@@ -9,8 +9,8 @@ import usePersianDate from "~/composables/global/usePersianDate";
 useSeoMeta({
     title: "نتیجه تراکنش",
     description: "",
-        keywords : ""
+    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