tech: add debounce to handleMove

Author: maximeperrault

frontend/src/domain/shared_slices/Map.ts

@@ -36,8 +36,8 @@ type MapSliceStateType = {
   fitToExtent?: Extent
   isAreaSelected: boolean
   isolatedLayer: IsolatedLayerType | undefined
-  mapView: MapView
   locateOnMap: LocateOnMap | undefined
+  mapView: MapView
   selectedBaseLayer: BaseLayer
   zoomToCenter?: Coordinate
 }
@@ -112,12 +112,12 @@ const mapSlice = createSlice({
     setIsolateMode(state, action: PayloadAction<IsolatedLayerType | undefined>) {
       state.isolatedLayer = action.payload
     },
-    setMapView(state, action: PayloadAction<MapView>) {
-      state.mapView = action.payload
-    },
     setLocateOnMap(state, action: PayloadAction<LocateOnMap | undefined>) {
       state.locateOnMap = action.payload
     },
+    setMapView(state, action: PayloadAction<MapView>) {
+      state.mapView = action.payload
+    },
     setZoomToCenter(state, action) {
       state.zoomToCenter = action.payload
     }

frontend/src/features/map/hook/useSyncMapView.ts

@@ -1,7 +1,7 @@
 import { useAppDispatch } from '@hooks/useAppDispatch'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '@mtes-mct/monitor-ui'
 import { setMapView } from 'domain/shared_slices/Map'
-import { isEqual } from 'lodash'
+import { debounce, isEqual } from 'lodash'
 import { transformExtent } from 'ol/proj'
 import { useEffect, useRef } from 'react'
 
@@ -21,7 +21,7 @@ export const useSyncMapViewToRedux = (map: OpenLayerMap | undefined) => {
 
     const view = map.getView()
 
-    const handleMoveEnd = () => {
+    const handleMoveEnd = debounce(() => {
       const extent3857 = view.calculateExtent(map.getSize())
       const extent4326 = transformExtent(extent3857, OPENLAYERS_PROJECTION, WSG84_PROJECTION)
       const zoom = view.getZoom()
@@ -36,7 +36,7 @@ export const useSyncMapViewToRedux = (map: OpenLayerMap | undefined) => {
 
         dispatch(setMapView({ bbox: extent4326, zoom: zoomValue }))
       }
-    }
+    }, 250)
 
     map.on('moveend', handleMoveEnd)