Fix: issue where backend is being called twice

Dockerfile

@@ -1,4 +1,4 @@
-FROM oven/bun:1 as install
+FROM oven/bun:1 AS install
 RUN mkdir -p /temp/prod
 COPY package.json bun.lockb /temp/prod/
 RUN cd /temp/prod && bun install --frozen-lockfile

src/components/ImageModerator/ImageModerator.tsx

@@ -52,26 +52,28 @@ export default function ImageModerator({
   }
 
   const getNewImage = () => {
-    setImageData({ url: "", tags: [] });
-    fetch(`${middlewareUrl}/image`, {
-      method: "GET",
-    })
-      .then((response) => {
-        if (!response.ok) throw new Error("Response was not ok");
-        return response.json();
+    if (isLoading) {
+      setImageData({ url: "", tags: [] });
+      fetch(`${middlewareUrl}/image`, {
+        method: "GET",
       })
-      .then((data) => {
-        const url = data.url;
-        const tags = data.tags;
-        setImageData({ url, tags });
-      })
-      .catch((error) => {
-        setImageAlt("Error");
-        console.error(error);
-      })
-      .finally(() => {
-        setIsLoading(false);
-      });
+        .then((response) => {
+          if (!response.ok) throw new Error("Response was not ok");
+          return response.json();
+        })
+        .then((data) => {
+          const url = data.url;
+          const tags = data.tags;
+          setImageData({ url, tags });
+        })
+        .catch((error) => {
+          setImageAlt("Error");
+          console.error(error);
+        })
+        .finally(() => {
+          setIsLoading(false);
+        });
+    }
   };
 
   useEffect(getNewImage, [isLoading]);