load fast

src/components/listview/MenuItem.tsx

@@ -8,7 +8,7 @@ import PlusIcon from "@/components/icons/PlusIcon";
 import { motion } from "framer-motion";
 import Link from "next/link";
 import { useParams } from "next/navigation";
-import { memo, useMemo } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 
 interface MenuItemProps {
   food: Food;
@@ -38,6 +38,12 @@ const MenuItem = ({ food }: MenuItemProps) => {
     return fallbackImage;
   }, [food.images]);
 
+  const [imageSrc, setImageSrc] = useState(resolvedImage);
+
+  useEffect(() => {
+    setImageSrc(resolvedImage);
+  }, [resolvedImage]);
+
   const foodName = useMemo(() => food.title || "بدون نام", [food.title]);
 
   const foodContent = useMemo(() => {
@@ -95,11 +101,12 @@ const MenuItem = ({ food }: MenuItemProps) => {
       <Link href={foodDetailUrl} className="cursor-pointer">
         <img
           className="rounded-xl bg-[#F2F2F9] min-w-28 w-28 object-cover"
-          src={resolvedImage}
+          src={imageSrc}
           height={112}
           width={112}
           alt={foodName}
           loading="lazy"
+          onError={() => setImageSrc(fallbackImage)}
         />
       </Link>
       <div className="w-full inline-flex flex-col justify-between min-w-0">