Minor map improvements

jcraigk · Oct 10, 2024 · 38c19d8 · 38c19d8
1 parent e525f94
commit 38c19d8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/app/javascript/components/MapView.jsx b/app/javascript/components/MapView.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { formatNumber } from "./helpers/utils";
+import Loader from "./controls/Loader";
 
 const MapView = ({ mapboxToken, coordinates, venues, searchComplete, controls = true }) => {
   const mapContainer = useRef(null);
@@ -117,7 +118,12 @@ const MapView = ({ mapboxToken, coordinates, venues, searchComplete, controls =
     }
   };
 
-  return <div className="map-container" ref={mapContainer} />;
+  return (
+    <>
+      {!searchComplete && <Loader />}
+      <div className="map-container" ref={mapContainer} />
+    </>
+  );
 };
 
 export default MapView;
diff --git a/app/javascript/stylesheets/map.css.scss b/app/javascript/stylesheets/map.css.scss
@@ -16,9 +16,12 @@
   font-size: 1.2rem;
   background-color: $text-gray;
   margin-right: 0.5rem;
+  margin-bottom: 0.5rem;
   border-radius: $radius;
   padding: 0.1rem 0.3rem;
   color: white;
+  display: inline-block;
+  border: none !important;
 
   &:hover {
     background-color: $control-gray;