nandi.uk / semble
This repository has no description
0
Fork 0

Configure Feed

Select the types of activity you want to include in your feed.

feat: suspense boundaries on app layout

author
pdelfan date (Feb 27, 2026, 12:59 PM -0800) commit a745259d parent 57b45706
+53 -3
+14 -3
src/webapp/components/navigation/appLayout/AppLayout.tsx
··· 6 6 import { useNavbarContext } from '@/providers/navbar'; 7 7 import BottomBar from '../bottomBar/BottomBar'; 8 8 import { useMediaQuery } from '@mantine/hooks'; 9 + import { Suspense } from 'react'; 10 + import NavbarSkeleton from '../navbar/Skeleton.Navbar'; 11 + import BottomBarSkeleton from '../bottomBar/Skeleton.BottomBar'; 9 12 10 13 interface Props { 11 14 children: React.ReactNode; ··· 32 35 height: isMobile ? 85 : 0, 33 36 }} 34 37 > 35 - <Navbar /> 38 + <Suspense fallback={<NavbarSkeleton />}> 39 + <Navbar /> 40 + </Suspense> 36 41 37 42 <AppShell.Main> 38 43 {props.children} 39 - <ComposerDrawer /> 44 + 45 + <Suspense> 46 + <ComposerDrawer /> 47 + </Suspense> 40 48 </AppShell.Main> 41 - <BottomBar /> 49 + 50 + <Suspense fallback={<BottomBarSkeleton />}> 51 + <BottomBar /> 52 + </Suspense> 42 53 </AppShell> 43 54 ); 44 55 }
+39
src/webapp/components/navigation/appLayout/Skeleton.AppLayout.tsx
··· 1 + 'use client'; 2 + 3 + import { AppShell } from '@mantine/core'; 4 + import { useNavbarContext } from '@/providers/navbar'; 5 + import { useMediaQuery } from '@mantine/hooks'; 6 + import NavbarSkeleton from '../navbar/Skeleton.Navbar'; 7 + import BottomBarSkeleton from '../bottomBar/Skeleton.BottomBar'; 8 + 9 + interface Props { 10 + children: React.ReactNode; 11 + } 12 + 13 + export default function AppLayoutSkeleton(props: Props) { 14 + const { mobileOpened, desktopOpened } = useNavbarContext(); 15 + const isMobile = useMediaQuery('(max-width: 48em)', true); // "sm" breakpoint 16 + 17 + return ( 18 + <AppShell 19 + header={{ height: 0 }} 20 + navbar={{ 21 + width: 300, 22 + breakpoint: 'xs', 23 + collapsed: { mobile: !mobileOpened, desktop: !desktopOpened }, 24 + }} 25 + aside={{ 26 + width: 0, 27 + breakpoint: 'xl', 28 + collapsed: { mobile: true }, 29 + }} 30 + footer={{ 31 + height: isMobile ? 85 : 0, 32 + }} 33 + > 34 + <NavbarSkeleton /> 35 + <AppShell.Main>{props.children}</AppShell.Main> 36 + <BottomBarSkeleton /> 37 + </AppShell> 38 + ); 39 + }