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,39 +266,14 @@ 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 ? (
-				<p>Loading...</p>
+				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)' }}>
-							<MapViewManager coords={coords} mapState={mapState} setMapState={setMapState} loading={loading} setSubmenu={setSubmenu} />
-							<TileLayer
-								attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-								url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
-							/>
-							<PolylineWithArrows coords={coords} showDirection={showDirection} />
-							<FeatureGroup>
-								<EditControl
-									position="topright"
-									onCreated={onCreated}
-									onEdited={onEdited}
-									onDeleted={onDeleted}
-									draw={{
-										rectangle: true,
-										polyline: false,
-										polygon: false,
-										circle: false,
-										marker: false,
-										circlemarker: false,
-									}}
-								/>
-							</FeatureGroup>
-						</MapContainer>
-					)
-				:
 					<>
 						<p>No data</p>
 						<form onSubmit={handleSubmit}>
@@ -307,7 +282,40 @@ function Map({data, loading, end, duration, slider, mapState, setMapState, setSu
 							</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'
+							url='https://maptiles.p.rapidapi.com/en/map/v1/{z}/{x}/{y}.png?rapidapi-key=4375b0b1d8msh0c9e7fa3efb9adfp1769dfjsnd603a0387fea'
+						/>
+						<PolylineWithArrows coords={coords} showDirection={showDirection} />
+						<FeatureGroup>
+							<EditControl
+								position="topright"
+								onCreated={onCreated}
+								onEdited={onEdited}
+								onDeleted={onDeleted}
+								draw={{
+									rectangle: true,
+									polyline: false,
+									polygon: false,
+									circle: false,
+									marker: false,
+									circlemarker: false,
+								}}
+							/>
+						</FeatureGroup>
+					</MapContainer>
+				</div>
+			)}
 		</div>
 	);
 }