fix: prevent drawn items from disappearing during data load

mapper/src/App.css

@@ -229,3 +229,17 @@ h2 {
 .submenu button.active {
 	background-color: #4a4a4a;
 }
+
+.loading-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+	z-index: 10000;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: white;
+}

mapper/src/App.js

@@ -266,14 +266,31 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 		setDrawnItems(items => items.filter(item => !deletedIds.includes(item.id)));
 	};
 
+	const showMap = Array.isArray(data);
+
 	return (
 		<div className='container'>
-			{loading ?
+			{!showMap ? (
+				loading ? (
 					<p>Loading...</p>
-			:
-				coords.length ?
-					(
-						<MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: 'calc(100vh - 2.5rem)' }}>
+				) : (
+					<>
+						<p>No data</p>
+						<form onSubmit={handleSubmit}>
+							<p>
+								<input placeholder='API key' />
+							</p>
+						</form>
+					</>
+				)
+			) : (
+				<div style={{ position: 'relative', width: '100%', height: 'calc(100vh - 2.5rem)' }}>
+					{loading && (
+						<div className="loading-overlay">
+							<p>Loading...</p>
+						</div>
+					)}
+					<MapContainer center={mapState.center || [0, 0]} zoom={mapState.zoom} scrollWheelZoom={true} style={{ width: '100%', height: '100%' }}>
 						<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} setSubmenu={setSubmenu} />
 						<TileLayer
 							attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
@@ -297,17 +314,8 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 							/>
 						</FeatureGroup>
 					</MapContainer>
-					)
-				:
-					<>
-						<p>No data</p>
-						<form onSubmit={handleSubmit}>
-							<p>
-								<input placeholder='API key' />
-							</p>
-						</form>
-					</>
-			}
+				</div>
+			)}
 		</div>
 	);
 }