feature-075: React Suspense 적용

teamViNO · Feb 17, 2024 · 1810a97 · 1810a97
1 parent da15ad6
commit 1810a97
Showing 1 changed file with 63 additions and 56 deletions.
diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -1,8 +1,6 @@
-import CategoryTitle from '@/components/category/CategoryTitle';
-import { useEffect, useState } from 'react';
+import React, { Suspense, useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import * as CategoryPageStyles from '@/styles/category/index.style';
-import Card from '@/components/category/Card';
 import { useRecoilValue } from 'recoil';
 import { categoryState } from '@/stores/category';
 import { ISubFolderProps, ITagProps } from 'types/category';
@@ -17,6 +15,11 @@ import { putVideoToOtherCategory } from '@/apis/category';
 import handleVideo from '@/utils/handleVideo';
 import CategoryPageSkeleton from '@/components/skeleton/CategoryPageSkeleton';
 
+const CategoryTitle = React.lazy(
+  () => import('@/components/category/CategoryTitle'),
+);
+const Card = React.lazy(() => import('@/components/category/Card'));
+
 const CategoryPage = () => {
   const params = useParams();
   const [isLoading, setIsLoading] = useState(true);
@@ -85,61 +88,65 @@ const CategoryPage = () => {
     return <CategoryPageSkeleton isSubSkeleton={!!params.sub_folder} />;
 
   return (
-    <CategoryPageStyles.Container>
-      <CategoryTitle name={name} totalVideos={sortedVideos.length} />
-      <CategoryPageStyles.MenuWrap>
-        {checkedVideos.length > 0 ? (
-          <VideoSelectMenu
-            categories={categories}
-            totalVideoCount={sortedVideos.length}
-            checkedVideos={checkedVideos}
-            setCheckedVideos={setCheckedVideos}
-            handleDeleteVideos={handleDeleteVideos}
-            allCheckBtnHandler={allCheckBtnHandler}
-            onFileClick={onFileClick}
-          />
-        ) : (
-          <DefaultMenu
-            menus={menus}
-            recentRegisterMode={recentRegisterMode}
-            selectedTags={selectedTags}
-            setSelectedTags={setSelectedTags}
-            toggleRecentRegisterMode={toggleRecentRegisterMode}
-          />
-        )}
-      </CategoryPageStyles.MenuWrap>
+    <Suspense
+      fallback={<CategoryPageSkeleton isSubSkeleton={!!params.sub_folder} />}
+    >
+      <CategoryPageStyles.Container>
+        <CategoryTitle name={name} totalVideos={sortedVideos.length} />
+        <CategoryPageStyles.MenuWrap>
+          {checkedVideos.length > 0 ? (
+            <VideoSelectMenu
+              categories={categories}
+              totalVideoCount={sortedVideos.length}
+              checkedVideos={checkedVideos}
+              setCheckedVideos={setCheckedVideos}
+              handleDeleteVideos={handleDeleteVideos}
+              allCheckBtnHandler={allCheckBtnHandler}
+              onFileClick={onFileClick}
+            />
+          ) : (
+            <DefaultMenu
+              menus={menus}
+              recentRegisterMode={recentRegisterMode}
+              selectedTags={selectedTags}
+              setSelectedTags={setSelectedTags}
+              toggleRecentRegisterMode={toggleRecentRegisterMode}
+            />
+          )}
+        </CategoryPageStyles.MenuWrap>
 
-      {(sortedVideos.length === 0 || sortedVideos === undefined) && (
-        <EmptyCard />
-      )}
-      {sortedVideos.length > 0 && (
-        <CardContainer>
-          {sortedVideos.map((video) => {
-            // 하위 카테고리에 있을 때 태그 선택된 것에 따라 비디오 보여지게하는 로직
-            const matchedTagCount = video.tag.reduce((acc, cur) => {
-              if (selectedTags.includes(cur.name)) return (acc += 1);
-              return acc;
-            }, 0);
-            if (
-              params.sub_folder &&
-              selectedTags.length &&
-              matchedTagCount !== selectedTags.length
-            )
-              return;
+        {(sortedVideos.length === 0 || sortedVideos === undefined) && (
+          <EmptyCard />
+        )}
+        {sortedVideos.length > 0 && (
+          <CardContainer>
+            {sortedVideos.map((video) => {
+              // 하위 카테고리에 있을 때 태그 선택된 것에 따라 비디오 보여지게하는 로직
+              const matchedTagCount = video.tag.reduce((acc, cur) => {
+                if (selectedTags.includes(cur.name)) return (acc += 1);
+                return acc;
+              }, 0);
+              if (
+                params.sub_folder &&
+                selectedTags.length &&
+                matchedTagCount !== selectedTags.length
+              )
+                return;
 
-            return (
-              <Card
-                mode="category"
-                video={video}
-                checkedVideos={checkedVideos}
-                setCheckedVideos={setCheckedVideos}
-                key={video.video_id}
-              />
-            );
-          })}
-        </CardContainer>
-      )}
-    </CategoryPageStyles.Container>
+              return (
+                <Card
+                  mode="category"
+                  video={video}
+                  checkedVideos={checkedVideos}
+                  setCheckedVideos={setCheckedVideos}
+                  key={video.video_id}
+                />
+              );
+            })}
+          </CardContainer>
+        )}
+      </CategoryPageStyles.Container>
+    </Suspense>
   );
 };