From c3ab49f7c1b0ffd4aea75c41432248b150d3c9c4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 29 Sep 2025 13:37:04 +0000
Subject: [PATCH] Fix: React rendering error

---
 .../maps/DynamicParkLocationMap.tsx           | 28 +++++++++++++++++++
 src/pages/ParkDetail.tsx                      |  4 +--
 2 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 src/components/maps/DynamicParkLocationMap.tsx

diff --git a/src/components/maps/DynamicParkLocationMap.tsx b/src/components/maps/DynamicParkLocationMap.tsx
new file mode 100644
index 00000000..7d3cbead
--- /dev/null
+++ b/src/components/maps/DynamicParkLocationMap.tsx
@@ -0,0 +1,28 @@
+import React, { Suspense, lazy } from 'react';
+import { Skeleton } from '@/components/ui/skeleton';
+
+interface ParkLocationMapProps {
+  latitude: number;
+  longitude: number;
+  parkName: string;
+  className?: string;
+}
+
+// Lazy load the map component to avoid React 18 issues with react-leaflet
+const ParkLocationMapComponent = lazy(() => 
+  import('./ParkLocationMap').then(mod => ({ default: mod.ParkLocationMap }))
+);
+
+const MapSkeleton = () => (
+  <div className="w-full h-64 rounded-lg border border-border">
+    <Skeleton className="w-full h-full rounded-lg" />
+  </div>
+);
+
+export function DynamicParkLocationMap(props: ParkLocationMapProps) {
+  return (
+    <Suspense fallback={<MapSkeleton />}>
+      <ParkLocationMapComponent {...props} />
+    </Suspense>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/ParkDetail.tsx b/src/pages/ParkDetail.tsx
index 4fced114..38c2f03a 100644
--- a/src/pages/ParkDetail.tsx
+++ b/src/pages/ParkDetail.tsx
@@ -10,7 +10,7 @@ import { MapPin, Star, Clock, Phone, Globe, Calendar, ArrowLeft, Users, Zap, Cam
 import { ReviewsSection } from '@/components/reviews/ReviewsSection';
 import { RideCard } from '@/components/rides/RideCard';
 import { Park, Ride } from '@/types/database';
-import { ParkLocationMap } from '@/components/maps/ParkLocationMap';
+import { DynamicParkLocationMap } from '@/components/maps/DynamicParkLocationMap';
 import { supabase } from '@/integrations/supabase/client';
 export default function ParkDetail() {
   const {
@@ -345,7 +345,7 @@ export default function ParkDetail() {
                       
                       {park.location?.latitude && park.location?.longitude && (
                         <div className="mt-4">
-                          <ParkLocationMap
+                          <DynamicParkLocationMap
                             latitude={Number(park.location.latitude)}
                             longitude={Number(park.location.longitude)}
                             parkName={park.name}