tanner/sensors
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix: prevent drawn items from disappearing during data load

Browse Source
This commit is contained in:
Tanner Collin (aider)
2025-08-15 20:13:54 +00:00
parent 9683110604
commit e53287be96
2 changed files with 54 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
mapper/src/App.css
View File

@@ -229,3 +229,17 @@ h2 {
.submenu button.active { .submenu button.active {
background-color: #4a4a4a; 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;
}

40
mapper/src/App.js
View File

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