aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Add variable text to loading screen

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-05 00:49:36 +00:00
parent 94b5db61b9
commit 983ad9e67a
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.jsx
View File

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

11
frontend/src/components/LoadingOverlay.jsx
View File

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