Add priority and lazy loading to some images

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="
-                    reverse
-                        ? 'bg-slate-100 text-slate-600'
-                        : 'bg-black text-white'
-                "
+                :class="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,30 +18,26 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
                 <Accordion />
             </div>
             <div class="w-full lg:w-[450px] xl:w-[600px]">
-                <div
-                    class="w-full bg-slate-50 rounded-xl flex-col-center px-5 py-16 sm:p-[5rem] gap-[1.5rem]"
-                >
+                <div 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
-                        class="w-full grid grid-cols-2 gap-y-[1.5rem] sm:gap-x-[3rem]"
-                    >
+                    <div 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
-                                class="size-[6.25rem] rounded-full border-slate-200 bg-white flex-center"
-                            >
+                            <div 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>
                             <span class="text-black typo-p-md">
-                                {{ inPackItem.item_title}}
+                                {{ inPackItem.item_title }}
                             </span>
                         </div>
                     </div>
@@ -51,4 +45,4 @@ const { selectedVariant } = inject("productVariant") as ProductVariantProvideTyp
             </div>
         </div>
     </section>
-</template>
+</template>