BUGFIX: Refactor map loading to use a dedicated loading component and improve dynamic import handling

src/app/projects/map/page.js

@@ -9,6 +9,20 @@ import Button from "@/components/ui/Button";
 import { mapLayers } from "@/components/ui/mapLayers";
 import { formatProjectStatus } from "@/lib/utils";
 
+// Loading component that can access translations
+function MapLoadingComponent({ t }) {
+	return (
+		<div className="w-full h-96 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
+			<span className="text-gray-500">{t ? t('map.loadingMap') : 'Loading map...'}</span>
+		</div>
+	);
+}
+
+// Dynamically import the map component to avoid SSR issues
+const DynamicMap = dynamic(() => import("@/components/ui/LeafletMap"), {
+	ssr: false,
+});
+
 function ProjectsMapPageContent() {
 	const searchParams = useSearchParams();
 	const router = useRouter();
@@ -29,15 +43,16 @@ function ProjectsMapPageContent() {
 	const [showLayerPanel, setShowLayerPanel] = useState(true);
 	const [currentTool, setCurrentTool] = useState("move"); // Current map tool
 
-	// Dynamically import the map component to avoid SSR issues
+	// Wrapper component for the map with proper loading state
-	const DynamicMap = dynamic(() => import("@/components/ui/LeafletMap"), {
+	const MapWrapper = React.useMemo(() => {
-		ssr: false,
+		return function MapWrapperComponent(props) {
-		loading: () => (
+			return (
-			<div className="w-full h-96 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
+				<Suspense fallback={<MapLoadingComponent t={t} />}>
-				<span className="text-gray-500">{t('map.loadingMap')}</span>
+					<DynamicMap {...props} />
-			</div>
+				</Suspense>
-		),
+			);
-	});
+		};
+	}, [t]);
 
 	// Status configuration with colors and labels
 	const statusConfig = {
@@ -920,7 +935,7 @@ function ProjectsMapPageContent() {
 				</div>
 			) : (
 				<div className="absolute inset-0">
-					<DynamicMap
+					<MapWrapper
 						center={mapCenter}
 						zoom={mapZoom}
 						markers={markers}