From 983ad9e67a48addaea0e7cc2af7c7ddfb3d487aa Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Wed, 5 Mar 2025 00:49:36 +0000
Subject: [PATCH] [frontend]: Add variable text to loading screen

---
 frontend/src/App.jsx                       |  2 +-
 frontend/src/components/LoadingOverlay.jsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c8517b7..d271a25 100644
--- a/frontend/src/App.jsx
+++ b/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
diff --git a/frontend/src/components/LoadingOverlay.jsx b/frontend/src/components/LoadingOverlay.jsx
index 76ac3d4..cb0ba05 100644
--- a/frontend/src/components/LoadingOverlay.jsx
+++ b/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>
 );
 
-export default LoadingOverlay;
+LoadingOverlay.propTypes = {
+    message: PropTypes.string.isRequired
+};
+
+export default LoadingOverlay;
\ No newline at end of file