fix imagebanner glitch

src/components/ImageBanner.jsx

@@ -2,32 +2,36 @@ import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
 const ImageBanner = () => {
-  const [currentImage, setCurrentImage] = useState(1);
+  const [currentImage, setCurrentImage] = useState(null);
-  const [isLoaded, setIsLoaded] = useState(false);
   const location = useLocation();
 
   useEffect(() => {
-    const countImages = async () => {
+    let isMounted = true;
+
+    const loadRandomImage = async () => {
       const images = await importAll(require.context('../../public/assets/banners', false, /\.(png|jpe?g|svg)$/));
-      setCurrentImage(Math.floor(Math.random() * images.length) + 1);
+      const randomImage = Math.floor(Math.random() * images.length) + 1;
+
+      const img = new Image();
+      img.src = `${process.env.PUBLIC_URL}/assets/banners/banner-${randomImage}.jpg`;
+
+      img.onload = () => {
+        if (isMounted) {
+          setCurrentImage(randomImage);
+        }
+      };
     };
 
-    setIsLoaded(false);
+    loadRandomImage();
-    countImages();
+
+    return () => {
+      isMounted = false;
+    };
   }, [location.key]);
 
-  useEffect(() => {
-    setIsLoaded(false);
-    const img = new Image();
-    img.src = `${process.env.PUBLIC_URL}/assets/banners/banner-${currentImage}.jpg`;
-    img.onload = () => {
-      setIsLoaded(true);
-    };
-  }, [currentImage]);
-
   return (
     <>
-      {isLoaded && <img id="banner-img" src={`${process.env.PUBLIC_URL}/assets/banners/banner-${currentImage}.jpg`} alt="banner" />}
+      {currentImage && <img id="banner-img" src={`${process.env.PUBLIC_URL}/assets/banners/banner-${currentImage}.jpg`} alt="banner" />}
     </>
   );
 };