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">