| [5d6f37a] | 1 | import { m } from 'framer-motion';
|
|---|
| 2 | import { useState, useEffect } from 'react';
|
|---|
| 3 | // @mui
|
|---|
| 4 | import { alpha } from '@mui/material/styles';
|
|---|
| 5 | import Box, { BoxProps } from '@mui/material/Box';
|
|---|
| 6 | //
|
|---|
| 7 | import Logo from '../logo';
|
|---|
| 8 |
|
|---|
| 9 | // ----------------------------------------------------------------------
|
|---|
| 10 |
|
|---|
| 11 | export default function SplashScreen({ sx, ...other }: BoxProps) {
|
|---|
| 12 | const [mounted, setMounted] = useState(false);
|
|---|
| 13 |
|
|---|
| 14 | useEffect(() => {
|
|---|
| 15 | setMounted(true);
|
|---|
| 16 | }, []);
|
|---|
| 17 |
|
|---|
| 18 | if (!mounted) {
|
|---|
| 19 | return null;
|
|---|
| 20 | }
|
|---|
| 21 |
|
|---|
| 22 | return (
|
|---|
| 23 | <Box
|
|---|
| 24 | sx={{
|
|---|
| 25 | right: 0,
|
|---|
| 26 | width: 1,
|
|---|
| 27 | bottom: 0,
|
|---|
| 28 | height: 1,
|
|---|
| 29 | zIndex: 9998,
|
|---|
| 30 | display: 'flex',
|
|---|
| 31 | position: 'absolute',
|
|---|
| 32 | alignItems: 'center',
|
|---|
| 33 | justifyContent: 'center',
|
|---|
| 34 | bgcolor: 'background.default',
|
|---|
| 35 | ...sx,
|
|---|
| 36 | }}
|
|---|
| 37 | {...other}
|
|---|
| 38 | >
|
|---|
| 39 | <>
|
|---|
| 40 | <m.div
|
|---|
| 41 | animate={{
|
|---|
| 42 | scale: [1, 0.9, 0.9, 1, 1],
|
|---|
| 43 | opacity: [1, 0.48, 0.48, 1, 1],
|
|---|
| 44 | }}
|
|---|
| 45 | transition={{
|
|---|
| 46 | duration: 2,
|
|---|
| 47 | ease: 'easeInOut',
|
|---|
| 48 | repeatDelay: 1,
|
|---|
| 49 | repeat: Infinity,
|
|---|
| 50 | }}
|
|---|
| 51 | >
|
|---|
| 52 | <Logo disabledLink sx={{ width: 64, height: 64 }} />
|
|---|
| 53 | </m.div>
|
|---|
| 54 |
|
|---|
| 55 | <Box
|
|---|
| 56 | component={m.div}
|
|---|
| 57 | animate={{
|
|---|
| 58 | scale: [1.6, 1, 1, 1.6, 1.6],
|
|---|
| 59 | rotate: [270, 0, 0, 270, 270],
|
|---|
| 60 | opacity: [0.25, 1, 1, 1, 0.25],
|
|---|
| 61 | borderRadius: ['25%', '25%', '50%', '50%', '25%'],
|
|---|
| 62 | }}
|
|---|
| 63 | transition={{ ease: 'linear', duration: 3.2, repeat: Infinity }}
|
|---|
| 64 | sx={{
|
|---|
| 65 | width: 100,
|
|---|
| 66 | height: 100,
|
|---|
| 67 | position: 'absolute',
|
|---|
| 68 | border: (theme) => `solid 3px ${alpha(theme.palette.primary.dark, 0.24)}`,
|
|---|
| 69 | }}
|
|---|
| 70 | />
|
|---|
| 71 |
|
|---|
| 72 | <Box
|
|---|
| 73 | component={m.div}
|
|---|
| 74 | animate={{
|
|---|
| 75 | scale: [1, 1.2, 1.2, 1, 1],
|
|---|
| 76 | rotate: [0, 270, 270, 0, 0],
|
|---|
| 77 | opacity: [1, 0.25, 0.25, 0.25, 1],
|
|---|
| 78 | borderRadius: ['25%', '25%', '50%', '50%', '25%'],
|
|---|
| 79 | }}
|
|---|
| 80 | transition={{
|
|---|
| 81 | ease: 'linear',
|
|---|
| 82 | duration: 3.2,
|
|---|
| 83 | repeat: Infinity,
|
|---|
| 84 | }}
|
|---|
| 85 | sx={{
|
|---|
| 86 | width: 120,
|
|---|
| 87 | height: 120,
|
|---|
| 88 | position: 'absolute',
|
|---|
| 89 | border: (theme) => `solid 8px ${alpha(theme.palette.primary.dark, 0.24)}`,
|
|---|
| 90 | }}
|
|---|
| 91 | />
|
|---|
| 92 | </>
|
|---|
| 93 | </Box>
|
|---|
| 94 | );
|
|---|
| 95 | }
|
|---|
