throttle map sync [this time AI was good]

I pointed AI to the previous throttle implementation and this time it gave me solution on first time.

Author: caspg

src/components/Map.tsx

@@ -8,6 +8,8 @@ import { MapState } from "../types";
 import { MAP_SOURCES } from "../constants/mapSources";
 import { useApp } from "../contexts/AppContext";
 import { SourceSpecification } from "maplibre-gl";
+import { useCallback } from "react";
+import throttle from "lodash.throttle";
 
 interface MapProps {
   mapState: MapState;
@@ -27,6 +29,21 @@ export function Map({
   const { state } = useApp();
   const source = MAP_SOURCES[sourceId] || state.customSources[sourceId];
 
+  // Create throttled callbacks
+  const throttledOnMapChange = useCallback(
+    throttle((newState: Partial<MapState>) => {
+      onMapChange(newState);
+    }, 500),
+    [onMapChange]
+  );
+
+  const throttledOnViewStateChange = useCallback(
+    throttle((newState: Partial<MapState>) => {
+      onViewStateChange(newState);
+    }, 500),
+    [onViewStateChange]
+  );
+
   function handleMove(evt: ViewStateChangeEvent) {
     const newState: Partial<MapState> = {
       center: [evt.viewState.longitude, evt.viewState.latitude] as [
@@ -39,9 +56,9 @@ export function Map({
     };
 
     if (synchronized) {
-      onMapChange(newState);
+      throttledOnMapChange(newState);
     } else {
-      onViewStateChange(newState);
+      throttledOnViewStateChange(newState);
     }
   }