load fast

src/app/[name]/(Main)/[id]/page.tsx

@@ -8,7 +8,6 @@ import { getToken } from "@/lib/api/func";
 import { ef } from "@/lib/helpers/utfNumbers";
 import { motion } from "framer-motion";
 import { ArrowLeft, Clock, Cup, Heart, TruckTick } from "iconsax-react";
-import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
 import { useGetProfile } from "../../(Profile)/profile/hooks/userProfileData";
@@ -131,13 +130,14 @@ function FoodPage({}: Props) {
   return (
     <div className="not-lg:max-w-lg not-lg:place-self-center not-lg:w-full not-lg:mb-10 pt-6 not-lg:flex not-lg:flex-col lg:fixed lg:z-10 lg:top-20 xl:top-[5.5rem] lg:bottom-24 lg:left-5 lg:right-4 xl:right-[285px] lg:grid lg:grid-cols-2 lg:min-h-0 lg:overflow-hidden lg:rounded-2xl">
       <div className="relative w-full  lg:h-full min-h-0 not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
-        <Image
-          className="lg:object-contain  h-auto object-cover bg-[#F2F2F9]"
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          className="lg:object-contain h-auto object-cover bg-[#F2F2F9] w-full"
           src={foodImage}
           alt={foodName}
-          width={1000}
-          height={100}
-          priority
+          onError={(event) => {
+            event.currentTarget.src = "/assets/images/no-image.png";
+          }}
         />
         <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
           <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">

src/app/[name]/(Main)/components/CategoryScroll.tsx

@@ -70,7 +70,19 @@ function CategoryImage({
     );
   }
 
-  return <img src={src} width={size} height={size} alt={alt} loading="lazy" />;
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      width={size}
+      height={size}
+      alt={alt}
+      loading="lazy"
+      onError={(event) => {
+        event.currentTarget.src = "/assets/images/food-image.png";
+      }}
+    />
+  );
 }
 
 type Variant = "large" | "small";

src/app/[name]/(Main)/order/history/page.tsx

@@ -118,6 +118,7 @@ function OrdersIndex() {
                                             width={64}
                                             height={64}
                                             alt={foodName}
+                                            unoptimized
                                         />
                                     </div>
                                     <div className='flex-1 min-w-0'>
@@ -203,6 +204,7 @@ function OrdersIndex() {
                                             width={64}
                                             height={64}
                                             alt={foodName}
+                                            unoptimized
                                         />
                                     </div>
                                     <div className='flex-1 min-w-0'>