Added Loading element

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">

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;