Fix markers not displaying on initial map load by fetching sellers af… (#273)

* Fix markers not displaying on initial map load by fetching sellers after map initialization

* Fix build issue

* Fix build issue

* Fix build issue

* Fix build issue

* Fix build

* Add type assertion to whenReady() in an attempt to resolve build.

---------

Co-authored-by: Darin Hajou <[email protected]>
Co-authored-by: swoocn <[email protected]>

Author: DarinHajou

src/components/shared/map/Map.tsx

@@ -81,12 +81,6 @@ const Map = ({
   const [isLocationAvailable, setIsLocationAvailable] = useState(false);
   const [initialLocationSet, setInitialLocationSet] = useState(false);
 
-  // Fetch initial seller coordinates when component mounts
-  useEffect(() => {
-    logger.info('Component mounted, fetching initial coordinates..');
-    fetchInitialCoordinates();
-  }, [searchQuery]);
-
   // Update origin when center prop changes
   useEffect(() => {
     if (center) {
@@ -160,30 +154,39 @@ const Map = ({
     map.panBy(panOffset, { animate: false }); // Disable animation to make the movement instant
   };
 
-  // Function to fetch initial coordinates
+  useEffect(() => {
+    if (mapRef.current) {
+      fetchInitialCoordinates();  // Fetch sellers when map is ready
+    }
+  }, [mapRef.current]);
+
   const fetchInitialCoordinates = async () => {
     if (searchQuery) return;
-
+  
     setLoading(true);
     setError(null);
+  
     try {
-      // Fetch the current map bounds
-      // manually set bounds as mapref is null during component rendering phase
-      const bounds = L.latLngBounds(
-        L.latLng(-90, -180),
-        L.latLng(90, 180)
-      );
-
-      let sellersData = await fetchSellerCoordinates(bounds, '');
-      sellersData = removeDuplicates(sellersData);
-      setSellers(sellersData);
+      const mapInstance = mapRef.current; // Access map instance via ref
+  
+      if (!mapInstance) {
+        logger.warn('Map instance is not ready yet');
+        return;
+      }
+  
+      const bounds = mapInstance.getBounds();
+      if (bounds) {
+        let sellersData = await fetchSellerCoordinates(bounds, '');
+        sellersData = removeDuplicates(sellersData);
+        setSellers(sellersData);
+      }
     } catch (error) {
       logger.error('Failed to fetch initial coordinates:', { error });
       setError('Failed to fetch initial coordinates');
     } finally {
       setLoading(false);
     }
-  };
+  };  
 
   // Function to handle map interactions (only when there's no search query)
   const handleMapInteraction = async (newBounds: L.LatLngBounds, mapInstance: L.Map) => {
@@ -336,8 +339,11 @@ const Map = ({
           zoomControl={false}
           minZoom={2}
           maxZoom={18}
-          // maxBounds={bounds}
-          // maxBoundsViscosity={1.0}
+          whenReady={
+            ((mapInstance: L.Map) => {
+              mapRef.current = mapInstance;
+            }) as unknown as () => void // utilize Type assertion
+          }
           className="w-full flex-1 fixed bottom-0 h-[calc(100vh-76.19px)] left-0 right-0"
         >
           <TileLayer