From b3befc2ba3fe8035ec0dce98a1f723b3b1929672 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Mon, 31 Mar 2025 22:41:26 +0100
Subject: [PATCH] [frontend]: Add spinner to LoadingOverlay

---
 frontend/src/components/LoadingOverlay.jsx | 23 +++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/LoadingOverlay.jsx b/frontend/src/components/LoadingOverlay.jsx
index d8594ff..9497d99 100644
--- a/frontend/src/components/LoadingOverlay.jsx
+++ b/frontend/src/components/LoadingOverlay.jsx
@@ -1,15 +1,32 @@
 import React from "react";
 import PropTypes from "prop-types";
 
+const spinnerStyle = {
+    border: "6px solid #f3f3f3",
+    borderTop: "6px solid #ffffff",
+    borderRadius: "50%",
+    width: "40px",
+    height: "40px",
+    animation: "spin 1s linear infinite",
+    marginBottom: "20px"
+};
+
 const LoadingOverlay = ({ message }) => (
     <div style={{
         position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
         background: "rgba(0, 0, 0, 0.85)", display: "flex",
-        alignItems: "center", justifyContent: "center", textAlign: "center",
-        color: "white", fontSize: "20px", fontWeight: "bold",
+        alignItems: "center", justifyContent: "center", flexDirection: "column",
+        textAlign: "center", color: "white", fontSize: "20px", fontWeight: "bold",
         zIndex: 100000
     }}>
+        <div style={spinnerStyle}></div>
         {message}
+        <style>{`
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    `}</style>
     </div>
 );
 
@@ -17,4 +34,4 @@ LoadingOverlay.propTypes = {
     message: PropTypes.string.isRequired
 };
 
-export default LoadingOverlay;
\ No newline at end of file
+export default LoadingOverlay;