fix: critical map/webgl bug

Author: jakejarvis

components/domain/hosting/hosting-map.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { memo } from "react";
 import MapboxMap, { Marker, NavigationControl } from "react-map-gl/mapbox";
 import type { Hosting } from "@/lib/schemas";
 
-function MapInner({ hosting }: { hosting: Hosting }) {
+export function HostingMap({ hosting }: { hosting: Hosting }) {
   if (!process.env.NEXT_PUBLIC_MAPBOX_TOKEN) return null;
 
   const lat = hosting.geo.lat;
@@ -26,7 +25,6 @@ function MapInner({ hosting }: { hosting: Hosting }) {
         touchZoomRotate={false}
         style={{ height: 280, width: "100%" }}
         mapStyle="mapbox://styles/mapbox/standard"
-        reuseMaps
       >
         <Marker longitude={lon} latitude={lat}>
           <div className="h-4 w-4 rounded-full bg-blue-600 shadow-2xl ring-2 ring-white" />
@@ -36,9 +34,3 @@ function MapInner({ hosting }: { hosting: Hosting }) {
     </div>
   );
 }
-
-export const HostingMap = memo(MapInner, (prev, next) => {
-  const p = prev.hosting.geo;
-  const n = next.hosting.geo;
-  return p.lat === n.lat && p.lon === n.lon;
-});

components/domain/hosting/hosting-section.tsx

@@ -2,8 +2,7 @@
 
 import { hasFlag } from "country-flag-icons";
 import { MailQuestionMark } from "lucide-react";
-import dynamic from "next/dynamic";
-import { MapSkeleton } from "@/components/domain/hosting/map-skeleton";
+import { HostingMap } from "@/components/domain/hosting/hosting-map";
 import { KeyValue } from "@/components/domain/key-value";
 import { KeyValueGrid } from "@/components/domain/key-value-grid";
 import { Section } from "@/components/domain/section";
@@ -19,15 +18,6 @@ import type { Hosting } from "@/lib/schemas";
 import { sections } from "@/lib/sections-meta";
 import { cn } from "@/lib/utils";
 
-const HostingMap = dynamic(
-  () =>
-    import("@/components/domain/hosting/hosting-map").then((m) => m.HostingMap),
-  {
-    ssr: false,
-    loading: () => <MapSkeleton />,
-  },
-);
-
 function formatLocation(geo: Hosting["geo"]): string {
   const parts = [geo.city, geo.region, geo.country].filter(Boolean);
   return parts.join(", ");