[frontend]: Add variable text to loading screen

frontend/src/App.jsx

@@ -214,7 +214,7 @@ function App() {
 
     return (
         <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative" }}>
-            {loading && <LoadingOverlay />}
+            {loading && <LoadingOverlay message={"Loading data..."}/>}
 
             {/* SEARCH BOX */}
             <div

frontend/src/components/LoadingOverlay.jsx

@@ -1,6 +1,7 @@
 import React from "react";
+import PropTypes from "prop-types";
 
-const LoadingOverlay = () => (
+const LoadingOverlay = ({ message }) => (
     <div style={{
         position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
         background: "rgba(0, 0, 0, 0.5)", display: "flex",
@@ -8,8 +9,12 @@ const LoadingOverlay = () => (
         color: "white", fontSize: "20px", fontWeight: "bold",
         zIndex: 1000
     }}>
-        Loading data...
+        {message}
     </div>
 );
 
+LoadingOverlay.propTypes = {
+    message: PropTypes.string.isRequired
+};
+
 export default LoadingOverlay;