From 8a9f427f3436c2e0074296656ee9e6b3042c9bcc Mon Sep 17 00:00:00 2001
From: JusticeV452 <55002917+JusticeV452@users.noreply.github.com>
Date: Thu, 18 Apr 2024 13:49:48 -0400
Subject: [PATCH] Added Loading element

---
 frontend/components/CompetitivenessMap.js |  3 ++-
 frontend/components/global/Loading.js     | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)
 create mode 100644 frontend/components/global/Loading.js

diff --git a/frontend/components/CompetitivenessMap.js b/frontend/components/CompetitivenessMap.js
index 644a6b7..16f10b4 100644
--- a/frontend/components/CompetitivenessMap.js
+++ b/frontend/components/CompetitivenessMap.js
@@ -1,6 +1,7 @@
 import React, {useState, useEffect, useRef} from "react";
 import * as PropTypes from "prop-types";
 import MapBase from "../components/global/MapBase";
+import Loading from "../components/global/Loading";
 import {GeoJSON} from "react-leaflet";
 import DiscreteSlider from "./global/DiscreteSlider";
 export const DEFAULT_MAP_CENTER_LAT = 20.5937;
@@ -137,7 +138,7 @@ const CompetitivenessMap = () => {
                         dataToDisplay={previewData}
                     />
                 ) : (
-                    <p>Loading...</p>
+                    <Loading />
                 )}
 
                 <div className="slider">
diff --git a/frontend/components/global/Loading.js b/frontend/components/global/Loading.js
new file mode 100644
index 0000000..c1cb43b
--- /dev/null
+++ b/frontend/components/global/Loading.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Loading = () => {
+    return (
+        <div
+            className="d-flex justify-content-center align-items-center"
+            style={{height: "100%"}}
+        >
+            <div className="spinner-border" role="status">
+                <span className="visually-hidden-focusable">Loading...</span>
+            </div>
+        </div>
+    );
+};
+
+export default Loading;