@abcagency/hc-ui-components 1.9.34 → 1.9.36

package/src/components/containers/filter/filter-item-container.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { useTrackEvent } from '~/contexts/trackEventContext';
-import { useComponents } from '~/contexts/componentContext';
+import FilterItem from '~/components/modules/filter/item';
 import { useMapList } from '~/contexts/mapListContext';
-import { twMerge } from '~/util/twMerge';
 
 const FilterItemContainer = ({
 	className,
@@ -18,38 +17,18 @@ const FilterItemContainer = ({
 	subcategoryRequireCategory = false,
 	...rest
 }) => {
-	// All hooks MUST be called before any early returns
-	const { FilterItem } = useComponents();
 	const { trackEvent, eventTypes } = useTrackEvent();
-	const { filteredListings, filterConfig } = useMapList();
-
-	// Initialize itemName and itemKey safely
-	const itemName = item?.name ? item.name : item;
-	const safeItemKey = itemKey === null ? itemName : itemKey;
-	const isActive = selectedFilters != undefined && !!selectedFilters[field]?.[safeItemKey];
+	const itemName = item.name ? item.name : item;
+	itemKey = itemKey === null ? itemName : itemKey;
+	const isActive = selectedFilters != undefined && !!selectedFilters[field]?.[itemKey];
 	const [activeItem, setActiveItem] = useState(isActive);
 
 	useEffect(() => {
 		if (!selectedFilters || isExternalLink) return;
-		setActiveItem(!!selectedFilters[field]?.[safeItemKey]);
-	}, [selectedFilters, field, safeItemKey, isExternalLink]);
-
-	useEffect(() => {
-		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
-		else if (activeItem === true) {
-			setActiveItem(false);
-		}
-	}, [selectedFilters, activeItem, field]);
-
-	// NOW we can do the guard check after all hooks
-	if (!item) {
-		console.warn('FilterItemContainer received undefined item for field:', field);
-		return null;
-	}
-
-	// Re-assign itemKey for the rest of the component
-	itemKey = safeItemKey;
+		setActiveItem(!!selectedFilters[field]?.[itemKey]);
+	}, [selectedFilters, field, itemKey]);
 
+	const { filteredListings } = useMapList();
 	const changeHandler = () => {
 		if (!isActive || isExternalLink) {
 			trackEvent(eventTypes.FILTER_APPLIED, { filterType: field, filterChecked: itemKey });
@@ -76,30 +55,30 @@ const FilterItemContainer = ({
 				delete updatedFilters[field];
 			}
 
-			if (field === 'category' && subcategoryRequireCategory) {
+			if (field === 'categoryClass' && subcategoryRequireCategory) {
 				const activeCategoryClass = itemKey;
 				const categoriesToConsiderForRemoval = new Set(
 					filteredListings
-						.filter(listing => listing.fields.category === activeCategoryClass)
-						.flatMap(listing => listing.fields.subCategory || [])
+						.filter(listing => listing.fields.categoryClass === activeCategoryClass)
+						.flatMap(listing => listing.fields.category || [])
 				);
 
 				const categoriesToRetain = new Set(
 					filteredListings
-						.filter(listing => listing.fields.category !== activeCategoryClass)
-						.flatMap(listing => listing.fields.subCategory || [])
+						.filter(listing => listing.fields.categoryClass !== activeCategoryClass)
+						.flatMap(listing => listing.fields.category || [])
 						.filter(category => categoriesToConsiderForRemoval.has(category))
 				);
 
-				if (updatedFilters['subCategory']) {
-					Object.keys(updatedFilters['subCategory']).forEach(categoryKey => {
+				if (updatedFilters['category']) {
+					Object.keys(updatedFilters['category']).forEach(categoryKey => {
 						if (categoriesToConsiderForRemoval.has(categoryKey) && !categoriesToRetain.has(categoryKey)) {
-							delete updatedFilters['subCategory'][categoryKey];
+							delete updatedFilters['category'][categoryKey];
 						}
 					});
 
-					if (Object.keys(updatedFilters['subCategory']).length === 0) {
-						delete updatedFilters['subCategory'];
+					if (Object.keys(updatedFilters['category']).length === 0) {
+						delete updatedFilters['category'];
 					}
 				}
 			}
@@ -108,9 +87,16 @@ const FilterItemContainer = ({
 		});
 	};
 
+	useEffect(() => {
+		if (selectedFilters && selectedFilters[field] && Object.keys(selectedFilters[field])?.length > 0) return;
+		else if (activeItem === true) {
+			setActiveItem(false);
+		}
+	}, [selectedFilters]);
+
 	return (
 		<FilterItem
-			className={twMerge(className, filterConfig?.classNames?.filterItem)}
+			className={className}
 			item={item}
 			type={type}
 			itemKey={itemKey}

package/src/components/containers/filter/location-container.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useComponents } from '~/contexts/componentContext';
+import FilterLocation from '~/components/modules/filter/location';
 import FilterCommute from '~/components/containers/filter/commute-container';
 import FilterPointsOfInterest from '~/components/containers/filter/points-of-interest-container';
 import { useMapList } from '~/contexts/mapListContext';
@@ -12,14 +12,10 @@ const FilterLocationContainer = ({
 	setLocation,
 	setSelectedListItem
 }) => {
-	// Get injected FilterLocation component from context
-	const { FilterLocation } = useComponents();
-	
-	const { setSelectedFilters, selectedFilters, filterOptions, noEntities, siteConfig } = useMapList();
+	const { setSelectedFilters, selectedFilters, filterOptions } = useMapList();
 
 	const locations = filterOptions?.locations;
 	const pointsOfInterest = filterOptions?.pointsOfInterest;
-	const showAtZoomLevel = siteConfig?.pointsOfInterestConfig?.showAtZoomLevel ?? 12;
 
 	return (
 		<FilterLocation
@@ -33,14 +29,13 @@ const FilterLocationContainer = ({
 			setSelectedFilters={setSelectedFilters}
 			selectedFilters={selectedFilters}
 		>
-			{showMap && !noEntities && <FilterCommute className="hc-mt-6" />}
-			{showMap && !noEntities && (
+			{showMap && <FilterCommute className="hc-mt-6" />}
+			{showMap && (
 				<FilterPointsOfInterest
 					className="hc-mt-4"
 					pointsOfInterest={pointsOfInterest}
 					setDefaultValue={setDefaultValue}
 					defaultValue={defaultValue}
-					showAtZoomLevel={showAtZoomLevel}
 				/>
 			)}
 		</FilterLocation>

package/src/components/containers/filter/points-of-interest-container.js

@@ -1,26 +1,15 @@
 import React from 'react';
-import { useComponents } from '~/contexts/componentContext';
+import Accordion from '~/components/modules/accordions/default';
+import AccordionFilterItem from '~/components/modules/accordions/filterItem';
 import RadioItemContainer from '~/components/containers/filter/points-of-interest-radio-item-container';
-import { usePlaces } from '~/contexts/placesContext';
 
 const FilterPointsOfInterestContainer = ({
 	title = "Points of interest",
 	pointsOfInterest,
 	setDefaultValue,
 	className,
-	defaultValue,
-	showAtZoomLevel = 12
+	defaultValue
 }) => {
-	// Get injected components from context
-	const { Accordion, FilterItemAccordion: AccordionFilterItem } = useComponents();
-	
-	const { currentZoom } = usePlaces();
-	
-	// Don't render if zoom level is below threshold
-	if (currentZoom < showAtZoomLevel) {
-		return null;
-	}
-
 	const renderRadioItem = (item, index) => (
 		<RadioItemContainer key={item.key + index} item={item} field={item.id} />
 	);

package/src/components/containers/filter/points-of-interest-radio-item-container.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useComponents } from '~/contexts/componentContext';
+import RadioItem from '~/components/modules/filter/radio-item';
 import { useMap } from '~/contexts/mapContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 
@@ -9,9 +9,6 @@ const RadioItemContainer = ({
 	field,
 	...rest
 }) => {
-	// Get injected FilterRadioItem component from context
-	const { FilterRadioItem: RadioItem } = useComponents();
-	
 	const { trackEvent, eventTypes } = useTrackEvent();
 	const { selectedPlaces, setSelectedPlaces } = useMap();
 	const chosenPlace = item.key.toLowerCase();

package/src/components/containers/filter/search-container.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useMapList } from '~/contexts/mapListContext';
-import { useComponents } from '~/contexts/componentContext';
+import Search from '~/components/modules/filter/search';
 
 const SearchContainer = ({
 	inputPlaceholder = "Keywords",
@@ -8,9 +8,6 @@ const SearchContainer = ({
 	className,
 	labelClassName
 }) => {
-	// Get injected FilterSearch component from context
-	const { FilterSearch: Search } = useComponents();
-	
 	const { query, setQuery, siteConfig } = useMapList();
 	const [inputValue, setInputValue] = useState(query != null ? query : "");
 	const debounceTimer = useRef(null);
@@ -40,11 +37,8 @@ const SearchContainer = ({
 		setQuery("");
 	};
 
-	// Update input value when query changes from context (e.g., loaded from URL or localStorage)
 	useEffect(() => {
-		if (query !== null && query !== inputValue) {
-			setInputValue(query);
-		} else if (query === null || query === "") {
+		if (query == null) {
 			setInputValue("");
 		}
 	}, [query]);

package/src/components/containers/jobListing/listing-details-container.js

@@ -2,15 +2,12 @@ import React from 'react';
 import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
-import { useComponents } from '~/contexts/componentContext';
+import ListingDetails from '~/components/modules/jobListing/listing-details';
 
 const ListingDetailsContainer = ({ item, recruiter }) => {
-	// Get injected ListingDetails component from context
-	const { ListingDetails } = useComponents();
-	
 	const { trackEvent, eventTypes } = useTrackEvent();
 	const { travelTime } = useMap();
-	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, easyApplyUrl, easyApplyText, isIframe, mobileDetailsCallback } = useMapList();
+	const { siteConfig, navigateToDetails, navigateToEasyApply, Link, linkFormat, easyApplyUrl, easyApplyText, isIframe } = useMapList();
 
 	const {
 	  useDetailsPostMessage,
@@ -39,7 +36,6 @@ const ListingDetailsContainer = ({ item, recruiter }) => {
 			jobsDomain={jobsDomain}
 			trackEvent={trackEvent}
 			eventTypes={eventTypes}
-			mobileDetailsCallback={mobileDetailsCallback}
 	  />
 	);
 };

package/src/components/containers/list/item-list-container.tsx

@@ -1,9 +1,10 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import useListLogic from '~/hooks/useList';
 import { useMap } from '~/contexts/mapContext';
 import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
-import { useComponents } from '~/contexts/componentContext';
+import ItemsList from '~/components/modules/list/item-list';
+import Accordion from '~/components/modules/accordions/default';
 import MapAccordionItemContainer from '~/components/containers/accordions/map-accordion-item-container';
 import { dynamicSort } from '~/util/sortUtil';
 import { Listing } from '~/types/Listings';
@@ -22,28 +23,19 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 	fieldsShown,
 	specialFeatures
 }) => {
-	// Get injected components from context
-	const { ItemsList, Accordion } = useComponents();
-	
-	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting, ExpandListComponent, favorites, noEntities } = useMapList();
+	const { filteredListings, loading, commuteLocation, sortSetting, setSortSetting, ExpandListComponent, favorites } = useMapList();
 	const { itemLimit, loader, scrollContainerRef, itemRefs } = useListLogic(filteredListings as any);
 	const { selectedListItem } = useMap();
 	const { trackEvent, eventTypes } = useTrackEvent() as any;
 	const itemExpandedContent = (item: any, recruiter: any) =>
 		item ? (ExpandListComponent  ? <ExpandListComponent listing={item} /> : <ListingDetailsContainer item={item} recruiter={recruiter} />) : null;
 
-	// Use useMemo to avoid hydration mismatch - create new array instead of mutating prop
-	// CommuteLocation starts as null on both server/client, so no hydration issue
-	const effectiveFieldsShown = useMemo(() => {
-		const fields = [...fieldsShown];
-		if (!fields.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0 && !noEntities) {
-			fields.push('travelTime');
-			fieldNames['travelTime'] = 'Commute';
-		} else if (fields.includes('travelTime') && (!commuteLocation || noEntities)) {
-			return fields.filter(x => x !== 'travelTime');
-		}
-		return fields;
-	}, [fieldsShown, commuteLocation, noEntities, fieldNames]);
+	if (!fieldsShown.includes('travelTime') && commuteLocation != null && Object.entries(commuteLocation).length > 0) {
+		fieldsShown.push('travelTime');
+		fieldNames['travelTime'] = 'Commute';
+	} else if (fieldsShown.includes('travelTime') && !commuteLocation) {
+		fieldsShown = fieldsShown.filter(x => x !== 'travelTime');
+	}
 
 	const setTrackedSortSetting = (sortSetting: { field: string; type: string }) => {
 		trackEvent(eventTypes.LIST_SORTED, sortSetting);
@@ -55,7 +47,7 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 		<ItemsList
 			fieldNames={fieldNames}
 			showMap={showMap}
-			fieldsShown={effectiveFieldsShown}
+			fieldsShown={fieldsShown}
 			filteredListings={filteredListings}
 			loading={loading}
 			sortSetting={sortSetting}
@@ -67,16 +59,15 @@ const ItemsListContainer: React.FC<ItemsListContainerProps> = ({
 			selectedListItem={selectedListItem}
 			includeFavorite={true}
 		>
-			<Accordion className="hc-divide-y-0 md:hc-divide-y hc-divide-uiAccent/10" defaultValue={selectedListItem?.id}>
+			<Accordion className="hc-divide-y hc-divide-uiAccent/10 hc-z-[1000] hc-h-[100%]" defaultValue={selectedListItem?.id}>
 				{(sortSetting ? dynamicSort(filteredListings, sortSetting.field, sortSetting.type, favorites as any) : filteredListings)
 					.slice(0, itemLimit)
 					.map((item: Listing, index: number) => (
 						<MapAccordionItemContainer
 							key={item.id}
-							showMap={showMap}
 							item={item}
 							itemRefs={itemRefs}
-							fieldsShown={effectiveFieldsShown}
+							fieldsShown={fieldsShown}
 							itemExpandedContent={itemExpandedContent}
 							specialFeatures={specialFeatures}
 							isActive={selectedListItem?.id === item.id}

package/src/components/containers/list/list-item/list-item-container.js

@@ -1,27 +1,21 @@
 import React from 'react';
 import { useMapList } from '~/contexts/mapListContext';
-import { useComponents } from '~/contexts/componentContext';
+import ListItem from '~/components/modules/list/list-item/list-item';
 
 const ListItemContainer = ({
 	isActive,
-	showMap,
 	item,
 	fieldsShown,
 	specialFeatures,
 	bodyClassName,
 	onItemSelected,
-	index,
 	...props
 }) => {
-	// Get injected ListItem component from context
-	const { ListItem } = useComponents();
-	
-	const { siteConfig, googleMapsApiKey, favorites, handleSettingFavorites, setMobileTab } = useMapList();
+	const { favorites, handleSettingFavorites, setMobileTab } = useMapList();
 
 	return (
 		<ListItem
 			isActive={isActive}
-			showMap={showMap}
 			item={item}
 			fieldsShown={fieldsShown}
 			specialFeatures={specialFeatures}
@@ -29,11 +23,8 @@ const ListItemContainer = ({
 			bodyClassName={bodyClassName}
 			onItemSelected={onItemSelected}
 			setMobileTab={setMobileTab}
-			siteConfig={siteConfig}
-			googleMapsApiKey={googleMapsApiKey}
 			favorites={favorites}
 			handleSettingFavorites={handleSettingFavorites}
-			index={index}
 			{...props}
 		/>
 	);

package/src/components/containers/maps/info-window-content-container.js

@@ -1,14 +1,11 @@
 import React from 'react';
-import { useComponents } from '~/contexts/componentContext';
+import InfoWindowContent from '~/components/modules/maps/info-window-content';
 import { useMapList } from '~/contexts/mapListContext';
 import { useTrackEvent } from '~/contexts/trackEventContext';
 
 const InfoWindowContentContainer = ({
 	item
 }) => {
-	// Get injected InfoWindowContent component from context
-	const { InfoWindowContent } = useComponents();
-	
 	const { trackEvent, eventTypes } = useTrackEvent();
 	const { setSelectedFilters, setMobileTab, selectedFilters, siteConfig } = useMapList();
 	const fieldsShown = siteConfig.locationFiltersShown;
@@ -60,7 +57,7 @@ const InfoWindowContentContainer = ({
 			newFilters.state = { [items[0].fields.state]: true };
 			filters.push({ filterType: 'state', filterChecked: items[0].fields.state });
 		}
-		
+
 		newFilters.entityName = { [items[0].fields.entityName]: true };
 		filters.push({ filterType: 'entityName', filterChecked: items[0].fields.entityName });
 

package/src/components/containers/maps/map-container.js

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from "react";
 
 import MapMarker from "~/components/containers/maps/map-marker-container";
-import { useComponents } from '~/contexts/componentContext';
+import PlaceMarker from "~/components/modules/maps/place-marker";
 
 import { usePlaces } from "~/contexts/placesContext";
 import { useMap } from "~/contexts/mapContext";
@@ -11,44 +11,11 @@ import { useMapList } from "~/contexts/mapListContext";
 
 import { markerIconSelected, markerIcon, pinIcon } from "~/util/mapIconUtil";
 
+import Map from "~/components/modules/maps/map";
 import { MarkerClustererF, Marker } from "@react-google-maps/api";
 import { clusterOptions } from "~/util/mapUtil";
-import { BallTriangle } from 'react-loader-spinner';
 
 const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }) => {
-	// Get injected components from context
-	const { Map, PlaceMarker } = useComponents();
-	
-	const [isGoogleMapsReady, setIsGoogleMapsReady] = useState(false);
-
-	// Check if Google Maps is loaded
-	useEffect(() => {
-		if (typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map) {
-			console.log('Google Maps already loaded');
-			setIsGoogleMapsReady(true);
-			return;
-		}
-
-		console.log('Waiting for Google Maps to load...');
-		let attempts = 0;
-		const maxAttempts = 50; // 5 seconds max
-		
-		// Poll for Google Maps to become available
-		const checkInterval = setInterval(() => {
-			attempts++;
-			if (typeof window !== 'undefined' && window.google && window.google.maps && window.google.maps.Map) {
-				console.log('Google Maps loaded after', attempts * 100, 'ms');
-				setIsGoogleMapsReady(true);
-				clearInterval(checkInterval);
-			} else if (attempts >= maxAttempts) {
-				console.error('Google Maps failed to load after 5 seconds');
-				clearInterval(checkInterval);
-			}
-		}, 100);
-
-		return () => clearInterval(checkInterval);
-	}, []);
-
 	const {
 		location,
 		zoom,
@@ -66,8 +33,7 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 		selectedFilters,
 		setSelectedFilters,
 		setQuery,
-		siteConfig,
-		setMapBounds
+		siteConfig
 	} = useMapList();
 	const [mapItems, setMapItems] = useState(null);
 	const [markersToHideFromBounds, setMarkersToHideFromBounds] = useState([]);
@@ -97,12 +63,6 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 		if (newZoom !== currentZoom) {
 			setCurrentZoom(newZoom);
 		}
-
-		// Update map bounds for viewport filtering
-		if (mapRef.current && setMapBounds) {
-			const bounds = mapRef.current.getBounds();
-			setMapBounds(bounds);
-		}
 	};
 
 	useEffect(() => {
@@ -168,26 +128,23 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 			fitBounds(mapRef.current, true);
 		}
 		if (mapRef.current && !mapInteracted) {
-			const jobPinZoomLevel = siteConfig?.jobPinZoomLevel ?? 12;
 			const currZoom = mapRef.current.zoom;
-			const setZoomVal = currZoom < (jobPinZoomLevel + 1) ? currZoom : jobPinZoomLevel;
+			const setZoomVal = currZoom < 13 ? currZoom : 12;
 			mapRef.current.setZoom(setZoomVal);
 		}
-	}, [filteredListings, siteConfig]);
+	}, [filteredListings]);
 
 	useEffect(() => {
 		if (!mapRef.current || !location || mapInteracted) return;
-		const jobPinZoomLevel = siteConfig?.jobPinZoomLevel ?? 12;
 		mapRef.current.panTo(new google.maps.LatLng(location.latitude, location.longitude));
 		if (mapRef.current) {
-			const setZoomVal = zoom < (jobPinZoomLevel + 1) ? zoom : jobPinZoomLevel;
+			const setZoomVal = zoom < 13 ? zoom : 12;
 			mapRef.current.setZoom(setZoomVal);
 		}
-	}, [location, zoom, siteConfig]);
+	}, [location, zoom, mapRef.current]);
 
 	const fitBounds = (map, overload = false) => {
 		if ((mapInteracted === false || overload) && mapItems != null) {
-			if (typeof window === 'undefined' || !window.google) return;
 			const bounds = new window.google.maps.LatLngBounds();
 
 			mapItems.forEach(item => {
@@ -229,15 +186,6 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 		setMapInteracted(true);
 		setMarkersToHideFromBounds([]);
 		selectLocationEntity(mapLocation);
-		const jobPinZoomLevel = siteConfig?.jobPinZoomLevel;
-		if (jobPinZoomLevel !== undefined && mapRef.current) {
-			setTimeout(() => {
-				if (mapRef.current) {
-					mapRef.current.panTo(new google.maps.LatLng(mapLocation.latitude, mapLocation.longitude));
-					mapRef.current.setZoom(jobPinZoomLevel);
-				}
-			}, 300);
-		}
 	};
 
 	const onLoad = map => {
@@ -281,7 +229,6 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 		}
 
 		setTimeout(() => {
-			if (typeof window === 'undefined' || !window.google) return;
 			const bounds = new window.google.maps.LatLngBounds();
 
 			markers.forEach(marker => {
@@ -306,37 +253,12 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 			}
 		}, 300);
 	};
-	if (!isGoogleMapsReady) {
-		return (
-			<div className="hc-w-full hc-h-full hc-bg-gray-100 hc-flex hc-items-center hc-justify-center hc-min-h-[400px]">
-				<BallTriangle
-					height={80}
-					width={80}
-					radius={5}
-					color="#2563eb"
-					ariaLabel="ball-triangle-loading"
-					wrapperStyle={{}}
-					wrapperClass=""
-					visible={true}
-				/>
-			</div>
-		);
+	if (!mapItems) {
+		return null;
 	}
+	const mapItemsKey = mapItems.map(item => item.id).join("-");
 
-	// Ensure mapItems is an array
-	const mapItemsArray = Array.isArray(mapItems) ? mapItems : [];
-	
-	if (!mapItemsArray || mapItemsArray.length === 0) {
-		return (
-			<div className="hc-w-full hc-h-full hc-bg-gray-100 hc-flex hc-items-center hc-justify-center">
-				<div className="hc-text-gray-600">No locations to display</div>
-			</div>
-		);
-	}
-
-	const mapItemsKey = mapItemsArray.map(item => item.id).join("-");
-
-
+	console.log(location);
 	return (
 		<Map
 			zoom={zoom}
@@ -370,7 +292,7 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 			>
 				{clusterer => (
 					<>
-						{mapItemsArray.map(item => {
+						{mapItems.map(item => {
 							const markerCount = Object.values(item.items).length;
 							return (
 								<MapMarker
@@ -395,7 +317,7 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
               		currentZoom >= marker.minZoom &&
                   currentZoom <= marker.maxZoom && (
               			<Marker
-              				key={`additional-marker-${marker.title}-${index}`}
+              				key={`marker-${marker.title}-${index}`}
               				position={marker.position}
               				title={marker.title}
               				icon={{
@@ -409,7 +331,7 @@ const MapContainer = ({ markerConfigs, infoWindowClasses, clusterGridSize = 60 }
 						{poiMarkers &&
               poiMarkers.markers.map((marker, index) => (
               	<PlaceMarker
-              		key={`poi-marker-${marker.title}-${index}`}
+              		key={`marker-${marker.title}-${index}`}
               		marker={marker}
               		index={index}
               		selectedPlaceMarker={selectedPlaceMarker}

package/src/components/containers/maps/map-list-container.js

@@ -1,28 +1,9 @@
-import React, { lazy, Suspense } from 'react';
-import { BallTriangle } from 'react-loader-spinner';
+import React from 'react';
 
 import List from '~/components/containers/list/item-list-container';
+import Map from '~/components/containers/maps/map-container';
 import Filter from '~/components/containers/filter/filter-container';
-import { useComponents } from '~/contexts/componentContext';
-
-// Dynamically import the Map container (Google Maps is heavy)
-const Map = lazy(() => import('~/components/containers/maps/map-container'));
-
-// Loading placeholder that maintains layout
-const MapLoadingPlaceholder = () => (
-	<div className="hc-w-full hc-h-full hc-bg-gray-100 hc-flex hc-items-center hc-justify-center hc-min-h-[400px]">
-		<BallTriangle
-			height={80}
-			width={80}
-			radius={5}
-			color="#2563eb"
-			ariaLabel="ball-triangle-loading"
-			wrapperStyle={{}}
-			wrapperClass=""
-			visible={true}
-		/>
-	</div>
-);
+import MapList from '~/components/modules/maps/map-list';
 
 const MapListContainer = ({
 	loading = false,
@@ -37,9 +18,7 @@ const MapListContainer = ({
 	placeMappings,
 	mapPosition
 }) => {
-	// Get injected components from context
-	const { MapList } = useComponents();
-	
+
 	const listProps = {
 		fieldsShown,
 		fieldNames,
@@ -57,20 +36,13 @@ const MapListContainer = ({
 		showMap
 	};
 
-	// Always render map immediately - it handles its own loading state
-	const mapComponent = showMap ? (
-		<Suspense fallback={<MapLoadingPlaceholder />}>
-			<Map {...mapProps} />
-		</Suspense>
-	) : null;
-
 	return (
 		<MapList
 			showMap={showMap}
 			containerStyle={containerStyle}
 			loading={loading}
 			list={<List {...listProps} />}
-			map={mapComponent}
+			map={<Map {...mapProps} />}
 			filter={<Filter showMap={showMap} className="md:hc-hidden" />}
 			mapPosition={mapPosition}
 		/>