[frontend]: Add spinner to LoadingOverlay

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;
+export default LoadingOverlay;