From a1f7d60e198c47b739276fe28723d2829959dd5d Mon Sep 17 00:00:00 2001
From: CrispyBaguette <alexandre.bruyant@gmail.com>
Date: Thu, 5 May 2022 16:54:44 +0200
Subject: [PATCH] Added spinner over preview image

---
 client/src/ImagePreview.tsx | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/client/src/ImagePreview.tsx b/client/src/ImagePreview.tsx
index 4f045b6..24c5965 100644
--- a/client/src/ImagePreview.tsx
+++ b/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>
   );
 }