From e4a4261a0e68d5f4ad1819ecf0ae42ac19674295 Mon Sep 17 00:00:00 2001
From: RKWojs <rkwojs@gmail.com>
Date: Tue, 16 Sep 2025 16:35:25 +0200
Subject: [PATCH] BUGFIX: Refactor map loading to use a dedicated loading
 component and improve dynamic import handling

---
 src/app/projects/map/page.js | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/app/projects/map/page.js b/src/app/projects/map/page.js
index 7875050..70d5543 100644
--- a/src/app/projects/map/page.js
+++ b/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
-	const DynamicMap = dynamic(() => import("@/components/ui/LeafletMap"), {
-		ssr: false,
-		loading: () => (
-			<div className="w-full h-96 bg-gray-100 animate-pulse rounded-lg flex items-center justify-center">
-				<span className="text-gray-500">{t('map.loadingMap')}</span>
-			</div>
-		),
-	});
+	// Wrapper component for the map with proper loading state
+	const MapWrapper = React.useMemo(() => {
+		return function MapWrapperComponent(props) {
+			return (
+				<Suspense fallback={<MapLoadingComponent t={t} />}>
+					<DynamicMap {...props} />
+				</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}