···
2
2
3
3
import AppLayout from '../appLayout/AppLayout';
4
4
import GuestAppLayout from '../guestAppLayout/GuestAppLayout';
5
5
+
import DashboardSkeleton from './Skeleton.Dashboard';
5
6
import { useAuth } from '@/hooks/useAuth';
6
7
7
8
interface Props {
···
11
12
export default function Dashboard(props: Props) {
12
13
const { isAuthenticated, isLoading } = useAuth();
13
14
14
14
-
if (isLoading) return null;
15
15
+
if (isLoading) return <DashboardSkeleton />;
15
16
16
17
if (!isAuthenticated)
17
18
return <GuestAppLayout>{props.children}</GuestAppLayout>;
···
1
1
+
.fade {
2
2
+
animation: fade 2s ease-in-out infinite;
3
3
+
}
4
4
+
5
5
+
@keyframes fade {
6
6
+
0%,
7
7
+
100% {
8
8
+
opacity: 0.4;
9
9
+
}
10
10
+
50% {
11
11
+
opacity: 1;
12
12
+
}
13
13
+
}
14
14
+
15
15
+
@keyframes sway {
16
16
+
0%,
17
17
+
100% {
18
18
+
transform: rotate(-6deg);
19
19
+
}
20
20
+
50% {
21
21
+
transform: rotate(6deg);
22
22
+
}
23
23
+
}
···
1
1
+
'use client';
2
2
+
3
3
+
import { AppShell, Center, Stack, Text } from '@mantine/core';
4
4
+
import { useNavbarContext } from '@/providers/navbar';
5
5
+
import { useMediaQuery } from '@mantine/hooks';
6
6
+
import NavbarSkeleton from '../navbar/Skeleton.Navbar';
7
7
+
import BottomBarSkeleton from '../bottomBar/Skeleton.BottomBar';
8
8
+
import classes from './Skeleton.Dashboard.module.css';
9
9
+
import Header from '../header/Header';
10
10
+
11
11
+
export default function DashboardSkeleton() {
12
12
+
const { mobileOpened, desktopOpened } = useNavbarContext();
13
13
+
const isMobile = useMediaQuery('(max-width: 48em)', true); // "sm" breakpoint
14
14
+
15
15
+
return (
16
16
+
<AppShell
17
17
+
header={{ height: 0 }}
18
18
+
navbar={{
19
19
+
width: 300,
20
20
+
breakpoint: 'xs',
21
21
+
collapsed: { mobile: !mobileOpened, desktop: !desktopOpened },
22
22
+
}}
23
23
+
aside={{
24
24
+
width: 0,
25
25
+
breakpoint: 'xl',
26
26
+
collapsed: { mobile: true },
27
27
+
}}
28
28
+
>
29
29
+
<NavbarSkeleton />
30
30
+
31
31
+
<AppShell.Main>
32
32
+
<Header />
33
33
+
34
34
+
<Center mih="100dvh">
35
35
+
<Stack align="center" gap="xs">
36
36
+
<Text size="lg" c="gray.6" className={classes.fade}>
37
37
+
⋆ ˚ ✿ ˚ ⋆
38
38
+
</Text>
39
39
+
<Text fw={700} size="sm" c="dimmed" className={classes.fade}>
40
40
+
loading
41
41
+
</Text>
42
42
+
</Stack>
43
43
+
</Center>
44
44
+
</AppShell.Main>
45
45
+
46
46
+
<BottomBarSkeleton />
47
47
+
</AppShell>
48
48
+
);
49
49
+
}
nandi.uk