Change: Loaing の改善

itizawa · Oct 22, 2024 · d29f110 · d29f110
1 parent d515bf2
commit d29f110
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
@@ -1,6 +1,9 @@
+import { Box } from '@mui/material';
 import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { Suspense } from 'react';
 import { getCurrentUser } from '~/actions/user';
 import { Navbar } from '~/components/layout/Navbar';
+import { LoadingBox } from '~/components/uiParts/LoadingBox';
 import { SnackbarProvider } from '~/context/SnackbarProvider';
 import { ThemeProvider } from '~/context/ThemeProvider';
 import { generateWisblogMetadata } from '~/libs/generateWisblogMetadata';
@@ -13,20 +16,33 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const { currentUser } = await getCurrentUser();
-
   return (
     <html lang='ja'>
       <body>
         <AppRouterCacheProvider options={{ key: 'css' }}>
           <ThemeProvider>
             <SnackbarProvider>
-              <Navbar currentUser={currentUser} />
-              {children}
+              <Suspense fallback={<Navbar currentUser={null} isLoading />}>
+                <NavbarWrapper />
+              </Suspense>
+              <Suspense
+                fallback={
+                  <Box sx={{ pt: 5 }}>
+                    <LoadingBox />
+                  </Box>
+                }
+              >
+                {children}
+              </Suspense>
             </SnackbarProvider>
           </ThemeProvider>
         </AppRouterCacheProvider>
       </body>
     </html>
   );
 }
+
+const NavbarWrapper = async () => {
+  const { currentUser } = await getCurrentUser();
+  return <Navbar currentUser={currentUser} isLoading={false} />;
+};
diff --git a/apps/web/src/components/layout/Navbar/Navbar.tsx b/apps/web/src/components/layout/Navbar/Navbar.tsx
@@ -6,14 +6,16 @@ import type { User } from '@repo/types';
 import Link from 'next/link';
 import type { FC } from 'react';
 import urlJoin from 'url-join';
+import { LoadingBox } from '~/components/uiParts/LoadingBox';
 import { WrapperWithMenu } from '~/components/uiParts/WrapperWithMenu';
 import { generateMainUrl } from '~/utils/generateMainUrl';
 
 type Props = {
+  isLoading: boolean;
   currentUser: User | null;
 };
 
-export const Navbar: FC<Props> = ({ currentUser }) => {
+export const Navbar: FC<Props> = ({ currentUser, isLoading }) => {
   const { palette } = useTheme();
 
   return (
@@ -38,7 +40,9 @@ export const Navbar: FC<Props> = ({ currentUser }) => {
               Wisblog
             </Typography>
           </Link>
-          {currentUser ? (
+          {isLoading ? (
+            <LoadingBox />
+          ) : currentUser ? (
             <WrapperWithMenu
               menuItems={[
                 {