+2 -1

src/webapp/components/navigation/dashboard/Dashboard.tsx

View file Reviewed

··· 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>;

+23

src/webapp/components/navigation/dashboard/Skeleton.Dashboard.module.css

View file Reviewed

··· 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 + }

+49

src/webapp/components/navigation/dashboard/Skeleton.Dashboard.tsx

View file Reviewed

··· 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 + }

+1 -1

src/webapp/features/collections/components/collectionsNavList/Skeleton.CollectionsNavList.tsx

View file Reviewed

··· 10 10 11 11 <Group gap={'xs'}> 12 12 <Skeleton radius={'xl'} h={30} w={73} /> 13 13 - <Skeleton radius={'xl'} h={30} w={26} /> 13 13 + <Skeleton radius={'xl'} h={26} w={26} /> 14 14 </Group> 15 15 </Group> 16 16