feat: add loading state to search area button

mapper/src/App.js

@@ -313,6 +313,7 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 
 function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, submenu, setSubmenu, showDirection, setShowDirection, setMapState, shareStart, shareEnd, drawnItems}) {
 	const [showRange, setShowRange] = useState(false);
+	const [isSearching, setIsSearching] = useState(false);
 
 	const chooseDuration = (x) => {
 		setSubmenu(false);
@@ -459,6 +460,8 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 			southWest: bounds.getSouthWest(),
 		}));
 
+		setIsSearching(true);
+
 		try {
 			const api_key = localStorage.getItem('api_key');
 			const params = {
@@ -476,6 +479,8 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 		} catch (error) {
 			console.error('Error during area search:', error);
 			alert('An error occurred during the search.');
+		} finally {
+			setIsSearching(false);
 		}
 
 		setSubmenu(false);
@@ -651,7 +656,9 @@ function Menu({data, duration, setDuration, end, setEnd, slider, setSlider, subm
 							</label>
 							<button onClick={recentreView}>Recentre view</button>
 							<button onClick={excludeArea}>Exclude area</button>
-							<button onClick={searchArea}>Search area</button>
+							<button onClick={searchArea} disabled={isSearching}>
+								{isSearching ? 'Searching...' : 'Search area'}
+							</button>
 							<button onClick={shareRange}>Share range</button>
 							<button onClick={resetToDefaults}>Reset page</button>
 						</>