Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 14x 14x 14x 14x 374x 374x 374x 1119x | import * as React from "react";
import Dialog from "@mui/material/Dialog";
import DialogContent from "@mui/material/DialogContent";
import { Box, Typography, keyframes, useTheme } from "@mui/material";
import LOGO from "@/assets/logo/mvp_logo.png";
const pulse = keyframes`
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.85; }
`;
const shimmer = keyframes`
0% { background-position: -200% center; }
100% { background-position: 200% center; }
`;
const dotBounce = keyframes`
0%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-8px); }
`;
const fadeIn = keyframes`
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
`;
export default function SimpleLoading({ showLoading }) {
const theme = useTheme();
const primary = theme.palette.primary.main;
return (
<Dialog
open={showLoading}
PaperProps={{
sx: {
background: "transparent",
boxShadow: "none",
overflow: "visible",
animation: `${fadeIn} 0.3s ease-out`,
},
}}
slotProps={{
backdrop: {
sx: {
backgroundColor: "rgba(0, 0, 0, 0.35)",
backdropFilter: "blur(4px)",
},
},
}}
>
<DialogContent sx={{ display: "flex", flexDirection: "column", alignItems: "center", minWidth: 220 }}>
{/* Circular badge — the logo lives inside a perfect circle, not a square card */}
<Box
sx={{
width: 140,
height: 140,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: theme.palette.background.paper,
boxShadow: `0 8px 32px ${primary}33`,
mb: 2.5,
}}
>
<Box
component="img"
src={LOGO}
alt="Loading"
sx={{
width: 80,
height: 80,
objectFit: "contain",
animation: `${pulse} 2s ease-in-out infinite`,
filter: "drop-shadow(0 2px 8px rgba(0,0,0,0.1))",
}}
/>
</Box>
{/* Shimmer text — sits outside the circle, over the blurred backdrop */}
<Typography
variant="body1"
sx={{
fontWeight: 600,
fontSize: "0.95rem",
letterSpacing: "0.08em",
background: `linear-gradient(90deg, #fff 40%, ${primary} 50%, #fff 60%)`,
backgroundSize: "200% auto",
backgroundClip: "text",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
animation: `${shimmer} 2.5s ease-in-out infinite`,
}}
>
Loading
</Typography>
{/* Bouncing dots */}
<Box sx={{ display: "flex", justifyContent: "center", gap: "5px", mt: 1 }}>
{[0, 1, 2].map((i) => (
<Box
key={i}
sx={{
width: 6,
height: 6,
borderRadius: "50%",
backgroundColor: primary,
animation: `${dotBounce} 1.2s ease-in-out infinite`,
animationDelay: `${i * 0.15}s`,
}}
/>
))}
</Box>
</DialogContent>
</Dialog>
);
}
// HOW TO USE
// import SimpleLoading from "../../../commons/components/loading/SimpleLoading";
// <SimpleLoading showLoading={isLoading} />
|