Add suspense

Author: owjs3901

apps/landing/src/components/Header/HeaderWrap.tsx

@@ -2,11 +2,11 @@
 
 import { Box, Flex } from '@devup-ui/react'
 import { usePathname, useSearchParams } from 'next/navigation'
+import { Suspense } from 'react'
 
 export function HeaderWrap({ children }: { children: React.ReactNode }) {
   const path = usePathname()
   const isRoot = path === '/'
-  const menu = useSearchParams().get('menu') === '1'
   return (
     <Box
       pos={isRoot ? 'fixed' : 'sticky'}
@@ -17,20 +17,31 @@ export function HeaderWrap({ children }: { children: React.ReactNode }) {
       w="100%"
       zIndex={1}
     >
-      <Flex
-        alignItems="center"
-        bg="$containerBackground"
-        borderRadius={isRoot ? [null, null, '16px'] : undefined}
-        boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
-        h={['50px', null, '70px']}
-        justifyContent="space-between"
-        maxW={isRoot ? '1440px' : '100%'}
-        mx="auto"
-        pl={[menu ? null : 4, 5, '40px']}
-        pr={[null, 5, '40px']}
-      >
-        {children}
-      </Flex>
+      <Suspense>
+        <HeaderWrapInner>{children}</HeaderWrapInner>
+      </Suspense>
     </Box>
   )
 }
+
+function HeaderWrapInner({ children }: { children: React.ReactNode }) {
+  const path = usePathname()
+  const isRoot = path === '/'
+  const menu = useSearchParams().get('menu') === '1'
+  return (
+    <Flex
+      alignItems="center"
+      bg="$containerBackground"
+      borderRadius={isRoot ? [null, null, '16px'] : undefined}
+      boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
+      h={['50px', null, '70px']}
+      justifyContent="space-between"
+      maxW={isRoot ? '1440px' : '100%'}
+      mx="auto"
+      pl={[menu ? null : 4, 5, '40px']}
+      pr={[null, 5, '40px']}
+    >
+      {children}
+    </Flex>
+  )
+}

apps/landing/src/components/Header/index.tsx

@@ -1,5 +1,6 @@
 import { css, Flex } from '@devup-ui/react'
 import Link from 'next/link'
+import { Suspense } from 'react'
 
 import { URL_PREFIX } from '../../constants'
 import { Logo } from '../Logo'
@@ -31,16 +32,18 @@ export function Header() {
   return (
     <HeaderWrap>
       <Flex alignItems="center" gap="16px">
-        <MobMenuWrapper openChildren={top}>
-          <Link
-            className={css({
-              textDecoration: 'none',
-            })}
-            href={URL_PREFIX + '/'}
-          >
-            <Logo />
-          </Link>
-        </MobMenuWrapper>
+        <Suspense>
+          <MobMenuWrapper openChildren={top}>
+            <Link
+              className={css({
+                textDecoration: 'none',
+              })}
+              href={URL_PREFIX + '/'}
+            >
+              <Logo />
+            </Link>
+          </MobMenuWrapper>
+        </Suspense>
       </Flex>
       <Flex alignItems="center" display={['none', null, 'flex']} gap="10px">
         <Flex alignItems="center" px="24px">
@@ -75,9 +78,11 @@ export function Header() {
         gap="10px"
         p="10px"
       >
-        <MobMenuButton>
-          <MobMenu />
-        </MobMenuButton>
+        <Suspense fallback={<MobMenu />}>
+          <MobMenuButton>
+            <MobMenu />
+          </MobMenuButton>
+        </Suspense>
       </Flex>
     </HeaderWrap>
   )