Added loading spinner to map loading

This commit is contained in:
Mitchell McCaffrey 2020-07-17 16:19:59 +10:00
parent e974c19bc4
commit 249d1d2492
2 changed files with 11 additions and 2 deletions

View File

@ -3,7 +3,7 @@ import { Box } from "theme-ui";
import Spinner from "./Spinner";
function LoadingOverlay() {
function LoadingOverlay(bg) {
return (
<Box
sx={{
@ -17,11 +17,15 @@ function LoadingOverlay() {
left: 0,
flexDirection: "column",
}}
bg="muted"
bg={bg}
>
<Spinner />
</Box>
);
}
LoadingOverlay.defaultProps = {
bg: "muted",
};
export default LoadingOverlay;

View File

@ -6,6 +6,7 @@ import Modal from "../components/Modal";
import MapTiles from "../components/map/MapTiles";
import MapSettings from "../components/map/MapSettings";
import ImageDrop from "../components/ImageDrop";
import LoadingOverlay from "../components/LoadingOverlay";
import blobToBuffer from "../helpers/blobToBuffer";
@ -195,6 +196,9 @@ function SelectMapModal({
}
async function handleDone() {
if (imageLoading) {
return;
}
if (selectedMapId) {
await applyMapChanges();
onMapChange(selectedMapWithChanges, selectedMapStateWithChanges);
@ -287,6 +291,7 @@ function SelectMapModal({
</Button>
</Flex>
</ImageDrop>
{imageLoading && <LoadingOverlay bg="overlay" />}
</Modal>
);
}