fix : bug load images in turotials pages

src/pages/tutorial/section/components/Leran.tsx

@@ -1,100 +1,104 @@
 import { useEffect, useState } from "react";
 import { LearnProps } from "../../../../types/props";
-
+import { BiLoaderAlt } from "react-icons/bi";
-import v2ray from "../../../../assets/tutorial/android/v2ray.png";
-import eshterki1 from "../../../../assets/tutorial/ios/1-eshterki.jpg";
-import eshterki2 from "../../../../assets/tutorial/ios/2-eshteraki.jpg";
-import eshterki3 from "../../../../assets/tutorial/ios/3-eshteraki.jpg";
-import eshterki4 from "../../../../assets/tutorial/ios/4-eshteraki.jpg";
-import Button from "../../../../components/button";
 
 const Learn = ({ activeTutorial, tutorialList }: LearnProps) => {
-  const data = [
+  const tutorialImages = [
     {
       id: 1,
-      images: [
+      images: [{ urlimg: "https://persain-game.com/front_end/img/v2ray.png" }],
-        {
-          id: 1,
-          url: v2ray,
-          alt: "v2ray",
-        },
-      ],
-      btn: "دانلود برنامه",
     },
     {
       id: 2,
       images: [
-        {
+        { urlimg: "https://persain-game.com/front_end/img/1-eshterki.jpg" },
-          id: 1,
+        { urlimg: "https://persain-game.com/front_end/img/2-eshteraki.jpg" },
-          url: eshterki1,
+        { urlimg: "https://persain-game.com/front_end/img/3-eshteraki.jpg" },
-          alt: "eshterki1",
+        { urlimg: "https://persain-game.com/front_end/img/4-eshteraki.jpg" },
-        },
-        {
-          id: 2,
-          url: eshterki2,
-          alt: "eshteraki2",
-        },
-        {
-          id: 3,
-          url: eshterki3,
-          alt: "eshterki3",
-        },
-        {
-          id: 4,
-          url: eshterki4,
-          alt: "eshterki4",
-        },
       ],
-      btn: null,
     },
     {
       id: 3,
-      images: [],
+      images: [
-      btn: null,
+        { urlimg: "https://persain-game.com/front_end/img/cisco-android1.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/cisco-android2.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/cisco-android3.jpg" },
+      ],
     },
     {
       id: 4,
-      images: [],
+      images: [
-      btn: null,
+        { urlimg: "https://persain-game.com/front_end/img/cisco-iphone1.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/cisco-iphone2.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/cisco-iphone3.jpg" },
+      ],
+    },
+    {
+      id: 5,
+      images: [],
+    },
+    {
+      id: 6,
+      images: [
+        { urlimg: "https://persain-game.com/front_end/img/cisco-pc.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/cisco-pc2.jpg" },
+        { urlimg: "https://persain-game.com/front_end/img/cisco-pc3.jpg" },
+      ],
+    },
+    {
+      id: 7,
+      images: [],
     },
-    { id: 5, images: [], btn: null },
-    { id: 6, images: [], btn: null },
-    { id: 7, images: [], btn: null },
   ];
-  const [tutotialImage, setTutorialImage] = useState(data);
+  const [loading, setLoading] = useState<boolean>(true);
-  const [list, setList] = useState(tutorialList);
+  const [list, setList] = useState(
+    tutorialList?.filter((id) => id.id === activeTutorial)
+  );
+  const [tutorialImagesState, setTutorialImagesState] = useState(
+    tutorialImages?.filter((id) => id.id === activeTutorial)
+  );
   useEffect(() => {
     setList(tutorialList?.filter((id) => id.id === activeTutorial));
-    setTutorialImage(data?.filter((id) => id.id === activeTutorial));
+    setTutorialImagesState(
+      tutorialImages?.filter((id) => id.id === activeTutorial)
+    );
+    setLoading(true);
   }, [activeTutorial]);
+  const handleLoadingImage = (e) => {
+    if (e.type === "load") setLoading(false);
+  };
   return (
     <div className="w-full h-full border-4 flex flex-col justify-center items-center border-solid mt-4 p-4 rounded-md border-gray-800 border-spacing-1">
       {list?.map((i) => {
-        return (
-          <p key={i.id}>
-            <span className="p-2 bg-gray-800 rounded-md">{i.name}</span>
-          </p>
-        );
-      })}
-      {tutotialImage?.map((i) => {
         return (
           <div
-            className="w-full h-full flex flex-col justify-center items-center"
             key={i.id}
+            className="relative w-full h-full flex flex-col justify-center items-center"
           >
-            <div className="w-full h-full grid grid-cols-1 md:grid-cols-2 m-4">
+            <span className="p-2 bg-gray-800 rounded-md mb-4">{i.name}</span>
-              {i.images?.map((i, index) => {
+            {loading && (
+              <div className="relative w-full h-60 flex justify-center items-center">
+                <BiLoaderAlt className="w-16 text-white h-16 animate-spin" />
+              </div>
+            )}
+            <div className="relative w-full h-full flex flex-col justify-center items-center">
+              {tutorialImagesState?.map((i) => {
                 return (
-                  <img
+                  <div key={i.id}>
-                    src={i.url}
+                    {i.images?.map((item) => {
-                    key={index}
+                      return (
-                    alt={i.alt}
+                        <img
-                    className="rounded-md relative w-full mb-2 mx-auto md:w-1/2"
+                          className="w-full md:w-1/2 mb-3 rounded-lg mx-auto h-full"
-                  />
+                          src={item.urlimg}
+                          alt="images"
+                          onLoad={(e) => handleLoadingImage(e)}
+                        />
+                      );
+                    })}
+                  </div>
                 );
               })}
             </div>
-            {i.btn && <Button>{i.btn}</Button>}
           </div>
         );
       })}