fix map cluster glitch

src/components/PlayerMap.tsx

@@ -7,6 +7,7 @@ import "leaflet.markercluster/dist/MarkerCluster.Default.css";
 import type { Plext } from "../types";
 import { useMapGeolocation } from "../hooks/useMapGeolocation";
 import { useMapBounds } from "../hooks/useMapBounds";
+import { useEffect } from "react";
 
 // Fix Leaflet marker icons
 delete (L.Icon.Default.prototype as any)._getIconUrl;
@@ -86,6 +87,19 @@ export function PlayerMap({ plexts, onCenterChange, onRadiusChange }: PlayerMapP
         })
         .filter(Boolean);
 
+    // Show markers after a short delay to allow clustering to complete
+    // This prevents individual markers from being visible before clusters are formed
+    useEffect(() => {
+        const timer = setTimeout(() => {
+            const markers = document.querySelectorAll('.leaflet-marker-icon:not(.marker-cluster)');
+            markers.forEach((marker) => {
+                marker.classList.add('visible');
+            });
+        }, 100); // Small delay to allow cluster group to process markers
+
+        return () => clearTimeout(timer);
+    }, [playerLocations]);
+
     return (
         <div className="map-container" style={{ height: "600px", width: "100%" }}>
             <MapContainer

src/index.css

@@ -428,3 +428,15 @@ body {
 .chart-card {
   animation: fadeIn 0.5s ease-out;
 }
+
+/* Marker Cluster - Hide individual markers initially to prevent glitch */
+/* This prevents individual markers from being visible before clustering is complete */
+.leaflet-marker-icon:not(.marker-cluster) {
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+}
+
+/* Show markers after a short delay to allow clustering to complete */
+.leaflet-marker-icon:not(.marker-cluster).visible {
+  opacity: 1;
+}