Added debounce to map padding calculations

packages/map-interface/src/helpers.ts

@@ -4,7 +4,7 @@ import {
   useMapDispatch,
   useMapStatus,
 } from "@macrostrat/mapbox-react";
-import { useRef } from "react";
+import { useMemo, useRef } from "react";
 import { debounce } from "underscore";
 import useResizeObserver from "use-resize-observer";
 
@@ -34,24 +34,31 @@ interface MapPaddingManagerProps {
   containerRef: React.RefObject<HTMLDivElement>;
   parentRef: React.RefObject<HTMLDivElement>;
   infoMarkerPosition: mapboxgl.LngLatLike;
+  debounceTime?: number;
 }
 
 export function MapPaddingManager({
   containerRef,
   parentRef,
   infoMarkerPosition,
+  debounceTime = 200,
 }: MapPaddingManagerProps) {
   const mapRef = useMapRef();
 
   const [padding, setPadding] = useState(
     getMapPadding(containerRef, parentRef)
   );
 
-  const updateMapPadding = useCallback(() => {
+  const _updateMapPadding = useCallback(() => {
     const newPadding = getMapPadding(containerRef, parentRef);
     setPadding(newPadding);
   }, [containerRef.current, parentRef.current]);
 
+  const updateMapPadding = useMemo(
+    () => debounce(_updateMapPadding, debounceTime),
+    [_updateMapPadding, debounceTime]
+  );
+
   useEffect(() => {
     const map = mapRef.current;
     if (map == null) return;
@@ -64,6 +71,9 @@ export function MapPaddingManager({
     onResize(sz) {
       updateMapPadding();
     },
+    round(n) {
+      return Math.round(n);
+    },
   });
 
   // Ideally, we would not have to do this when we know the infobox is loaded