add a flag to see if mapboxgl draw is initialized

app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx

@@ -79,15 +79,15 @@ function CustomAoI({
 
   const [selectedForEditing, setSelectedForEditing] = useAtom(selectedForEditingAtom);
 
-  const { onUpdate, isDrawing, setIsDrawing, features } = useAois();
+  const { drawToolInitialized, onUpdate, isDrawing, setIsDrawing, features } = useAois();
   const aoiDeleteAll = useSetAtom(aoiDeleteAllAtom);
 
   // Needed so that this component re-renders to when the draw selection changes
   // from feature to point.
   const [, forceUpdate] = useState(0);
   useEffect(() => {
-    const mbDraw = map?._drawControl;
-    if (!mbDraw) return;
+    if (!drawToolInitialized) return;
+    const mbDraw = map._drawControl;
     const aoiSelectedFor = selectedForEditing ? SIMPLE_SELECT : STATIC_MODE;
     const selectedFeatures = features.filter(f => f.selected);
 
@@ -102,7 +102,7 @@ function CustomAoI({
     return () => {
       map.off('draw.selectionchange', onSelChange);
     };
-  }, [selectedForEditing]);
+  }, [drawToolInitialized, selectedForEditing]);
 
   const resetAoisOnMap = useCallback(() => {
     const mbDraw = map?._drawControl;

app/scripts/components/common/map/controls/aoi/index.tsx

@@ -32,7 +32,7 @@ export default function DrawControl(props: DrawControlProps) {
   const theme = useTheme();
   const control = useRef<MapboxDraw>();
   const aoisFeatures = useAtomValue(aoisFeaturesAtom);
-  const { onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois();
+  const { onDrawToolInitialized, onUpdate, onDelete, onSelectionChange, onDrawModeChange } = useAois();
 
   useControl<MapboxDraw>(
     () => {
@@ -56,6 +56,7 @@ export default function DrawControl(props: DrawControlProps) {
       map.on('draw.delete', onDelete);
       map.on('draw.selectionchange', onSelectionChange);
       map.on('draw.modechange', onDrawModeChange);
+      map.on('draw.actionable', onDrawToolInitialized);
       map.on('load', () => {
         control.current?.set({
           type: 'FeatureCollection',
@@ -69,6 +70,7 @@ export default function DrawControl(props: DrawControlProps) {
       map.off('draw.delete', onDelete);
       map.off('draw.selectionchange', onSelectionChange);
       map.off('draw.modechange', onDrawModeChange);
+      map.off('draw.actionable', onDrawToolInitialized);
     },
     {
       position: 'top-left'

app/scripts/components/common/map/controls/hooks/use-aois.ts

@@ -1,5 +1,5 @@
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
-import { useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import { Feature, Polygon } from 'geojson';
 import { toAoIid } from '../../utils';
 import {
@@ -15,6 +15,7 @@ export default function useAois() {
   const features = useAtomValue(aoisFeaturesAtom);
 
   const [isDrawing, setIsDrawing] = useAtom(isDrawingAtom);
+  const [drawToolInitialized, setDrawToolInitialized] = useState(false);
 
   const aoisUpdateGeometry = useSetAtom(aoisUpdateGeometryAtom);
   const update = useCallback(
@@ -34,6 +35,10 @@ export default function useAois() {
     [update]
   );
 
+  const onDrawToolInitialized = () => {
+    setDrawToolInitialized(true);
+  };
+
   const aoiDelete = useSetAtom(aoisDeleteAtom);
   const onDelete = useCallback(
     (e) => {
@@ -65,7 +70,9 @@ export default function useAois() {
     onDelete,
     onSelectionChange,
     onDrawModeChange,
+    onDrawToolInitialized,
     isDrawing,
+    drawToolInitialized,
     setIsDrawing
   };
 }