added sending confirmation

website/src/Reviews.css

@@ -209,3 +209,41 @@
 .review-text::placeholder {
     color: white;
 }
+
+.loader-box{
+    height: 55px;
+    width: 86px;
+    margin-top: 30px;
+    justify-self: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* HTML: <div class="loader"></div> */
+.loader2 {
+  display: inline-flex;
+  gap: 5px;
+  animation: l3-0 1s infinite;
+  transform-origin: 50% calc(100% + 2.5px);
+}
+.loader2:before,
+.loader2:after {
+  content: "";
+  width: 25px;
+  aspect-ratio: 1;
+  box-shadow: 0 0 0 3px inset #fff;
+}
+.loader2:after {
+  transform-origin: -2.5px calc(100% + 2.5px);
+  animation: l3-1 1s infinite;
+}
+@keyframes l3-1 {
+  50%,
+  100% {transform:rotate(180deg)}
+}
+@keyframes l3-0 {
+  0%,
+  50%  {transform:rotate(0deg)}
+  100% {transform:rotate(90deg)}
+}

website/src/Reviews.jsx

@@ -11,6 +11,8 @@ function Reviews() {
     const [selectedWebsite, setSelectedWebsite] = useState("Not Specified");
     const [selectedRating, setSelectedRating] = useState(1);
     const [text, setText] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [sendSuccess, setSendSuccess] = useState(false);
 
     const MAX_TEXT = 900;
 
@@ -46,23 +48,35 @@ function Reviews() {
 
         console.log(JSON.stringify(review));
 
-        const response = await fetch(`${apiUrl}/review`, {
+        setLoading(true);
-            method: "POST",
+        setError(false);
-            body: JSON.stringify(review),
+        setSendSuccess(false);
-            headers: {
+
-                "Content-Type": "application/json"
+        try {
+            const response = await fetch(`${apiUrl}/review`, {
+                method: "POST",
+                body: JSON.stringify(review),
+                headers: {
+                    "Content-Type": "application/json"
+                }
+            });
+
+            if (!response.ok) {
+                setError(true);
+                return;
+            }
+            else {
+                setError(false);
             }
-        });
 
-        if (!response.ok) {
+            setSendSuccess(true);
+            const result = await response.json();
+        } catch (e) {
             setError(true);
-            return;
         }
-        else {
+        finally {
-            setError(false);
+            setLoading(false);
         }
-
-        const result = await response.json();
     }
 
     const changeSelectedWebsite = (website) => {
@@ -127,6 +141,12 @@ function Reviews() {
                         <label htmlFor="button-send" className="custom-button send-review">
                             Send Review
                         </label>
+
+                        <div className='loader-box'>
+                            {loading && <div className="loader2"></div>}
+                            {sendSuccess && <p className='description second'>Review sent</p>}
+                            {error && <p className='description second'>Error</p>}
+                        </div>
                     </div>
                 </div>