issue #238 refactor: header suspense refactoring

teamWaggle · Apr 22, 2024 · c21f3b6 · c21f3b6
1 parent b5fa240
commit c21f3b6
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/waggle-service/src/components/Header/Header.tsx b/packages/waggle-service/src/components/Header/Header.tsx
@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import { useNavigate } from "react-router-dom";
 import { useRecoilValue } from "recoil";
 
@@ -16,7 +17,6 @@ import { PATH } from "@/constants/path";
 import useModal from "@/hooks/common/useModal";
 
 import { headerStyle, headerBoxStyle, textStyle } from "@/components/Header/Header.style";
-// import { Suspense } from "react";
 
 const Header = () => {
   const isLoggedIn = useRecoilValue(isLoggedInState);
@@ -52,7 +52,9 @@ const Header = () => {
           </Text>
         </Flex>
         {isLoggedIn ? (
-          <LogInMenu />
+          <Suspense fallback={<div>로딩중</div>}>
+            <LogInMenu />
+          </Suspense>
         ) : (
           <NotiIcon width={30} height={30} onClick={handleLoginModal} />
         )}