feature-075: lazy loading 추가

teamViNO · Feb 17, 2024 · f706fa7 · f706fa7
1 parent 1810a97
commit f706fa7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 10 deletions.
diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -10,7 +10,6 @@ import { IVideoProps } from 'types/videos';
 import { sortVideos } from '@/utils/sortVideos';
 import { CardContainer } from '@/styles/category/Card.style';
 import VideoSelectMenu from '@/components/category/VideoSelectMenu';
-import DefaultMenu from '@/components/category/DefaultMenu';
 import { putVideoToOtherCategory } from '@/apis/category';
 import handleVideo from '@/utils/handleVideo';
 import CategoryPageSkeleton from '@/components/skeleton/CategoryPageSkeleton';
@@ -19,10 +18,12 @@ const CategoryTitle = React.lazy(
   () => import('@/components/category/CategoryTitle'),
 );
 const Card = React.lazy(() => import('@/components/category/Card'));
+const DefaultMenu = React.lazy(
+  () => import('@/components/category/DefaultMenu'),
+);
 
 const CategoryPage = () => {
   const params = useParams();
-  const [isLoading, setIsLoading] = useState(true);
   const [name, setName] = useState('');
   const [menus, setMenus] = useState<ISubFolderProps[] | ITagProps[]>([]);
   const [videos, setVideos] = useState<IVideoProps[]>([]);
@@ -44,7 +45,6 @@ const CategoryPage = () => {
       setMenus,
       setName,
       setVideos,
-      setIsLoading,
     );
     setCheckedVideos([]);
   }, [categories, params.sub_folder, params.top_folder]);
@@ -79,14 +79,10 @@ const CategoryPage = () => {
         setMenus,
         setName,
         setVideos,
-        setIsLoading,
       );
     }
   };
 
-  if (isLoading)
-    return <CategoryPageSkeleton isSubSkeleton={!!params.sub_folder} />;
-
   return (
     <Suspense
       fallback={<CategoryPageSkeleton isSubSkeleton={!!params.sub_folder} />}

diff --git a/src/utils/handleVideo.ts b/src/utils/handleVideo.ts
@@ -12,9 +12,7 @@ const handleVideo = async (
   >,
   setName: React.Dispatch<React.SetStateAction<string>>,
   setVideos: React.Dispatch<React.SetStateAction<IVideoProps[]>>,
-  setIsLoading: React.Dispatch<React.SetStateAction<boolean>>,
 ) => {
-  setIsLoading(true);
   if (!topCategoryId) {
     await getRecentVideos().then((res) => {
       setVideos(res.result.videos);
@@ -42,7 +40,6 @@ const handleVideo = async (
       setVideos(res.isSuccess ? res.result.videos : []);
     });
   }
-  setIsLoading(false);
 };
 
 export default handleVideo;