Added spinner over preview image

client/src/ImagePreview.tsx

@@ -1,3 +1,5 @@
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect } from "react";
 
 interface ImagePreviewProps {
@@ -14,12 +16,20 @@ function ImagePreview({ imageData }: ImagePreviewProps) {
   }, [imageUrl]);
 
   return (
-    <div className="blur-sm max-w-4xl mx-auto">
-      <img
-        alt="preview"
-        src={imageUrl}
-        className="object-cover min-w-[70%] my-4 px-2 mx-auto"
-      />
+    <div className="max-w-4xl mx-auto">
+      <div className="relative">
+        <img
+          alt="preview"
+          src={imageUrl}
+          className="blur-sm object-cover min-w-[70%] my-4 px-2 mx-auto"
+        />
+        <div className="absolute inset-1/2 -translate-y-12 -translate-x-12 w-24 h-24">
+          <FontAwesomeIcon
+            icon={faSpinner}
+            className="absolute animate-spin text-8xl"
+          />
+        </div>
+      </div>
     </div>
   );
 }