bananas-commerce-admin
Version:
What's this, an admin for apes?
51 lines • 2.6 kB
JavaScript
import React, { memo } from "react";
import { Box, Stack, Typography } from "@mui/material";
import CircularProgress from "@mui/material/CircularProgress";
import Fade from "@mui/material/Fade";
import { useTheme } from "@mui/material/styles";
import { alpha } from "@mui/system";
import Logo from "../components/Logo";
import { ss } from "../util/select_styles";
const styles = (theme) => ({
root: {
position: "fixed",
top: 0,
left: 0,
width: "100%",
height: "100%",
},
backdrop: {
position: "absolute",
zIndex: 2000,
backgroundColor: alpha(theme.palette.background.default, 0.666),
},
backdropPrimary: {
backgroundColor: alpha(theme.palette.primary.main, 0.666),
},
backdropSecondary: {
backgroundColor: alpha(theme.palette.secondary.main, 0.666),
},
backdropPaper: {
backgroundColor: alpha(theme.palette.background.paper, 0.666),
},
spinner: {
color: theme.palette.primary.main,
},
spinnerContrast: {
color: theme.palette.primary.contrastText,
},
logo: {
position: "absolute",
margin: 0,
marginTop: theme.spacing(-36),
},
});
const LoadingScreenInner = ({ backdrop, classes, color, label, loading, logo, }) => (React.createElement(Stack, { alignItems: "center", direction: "column", gap: 2, justifyContent: "center", sx: ss(classes.root, [classes.backdrop, backdrop], [classes.backdropPrimary, backdrop && color === "primary"], [classes.backdropSecondary, backdrop && color === "secondary"], [classes.backdropPaper, backdrop && color === "paper"]) },
React.createElement(Box, { sx: classes.logo }, logo != null && React.createElement(Logo, { src: logo })),
loading && React.createElement(CircularProgress, { sx: ss(classes.spinner, [classes.spinnerContrast, !color]) }),
label != null && (React.createElement(Typography, { color: "grey.600", variant: "body2" }, label))));
export const LoadingScreen = ({ backdrop = false, classes = styles(useTheme()), color, label, loading = true, logo, }) => backdrop ? (React.createElement(Fade, { in: loading, timeout: { enter: 750, exit: 250 } },
React.createElement("div", null,
React.createElement(LoadingScreenInner, { backdrop: backdrop, classes: classes, color: color, label: label, loading: loading, logo: logo })))) : (React.createElement(LoadingScreenInner, { backdrop: backdrop, classes: classes, color: color, label: label, loading: loading, logo: logo }));
export default memo(LoadingScreen);
//# sourceMappingURL=LoadingScreen.js.map