From 38c19d86ccb6b239ab82875d1eee69e724468ec2 Mon Sep 17 00:00:00 2001
From: "Justin Craig-Kuhn (JCK)" <jcraigk@gmail.com>
Date: Thu, 10 Oct 2024 16:54:36 -0700
Subject: [PATCH] Minor map improvements

---
 app/javascript/components/MapView.jsx   | 8 +++++++-
 app/javascript/stylesheets/map.css.scss | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/javascript/components/MapView.jsx b/app/javascript/components/MapView.jsx
index e52ebce0..831342f8 100644
--- 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
index e343d4a3..34643a25 100644
--- 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;