style: 스켈레톤 ul 제거

prgrms-web-devcourse · Nov 25, 2023 · a63ed03 · a63ed03
1 parent 460cf6e
commit a63ed03
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 7 deletions.
diff --git a/src/pages/MainPage/components/CreatedReviewList/index.tsx b/src/pages/MainPage/components/CreatedReviewList/index.tsx
@@ -54,9 +54,9 @@ const CreatedReviewList = ({
             {...review}
           />
         ))}
+        {isFetchingNextPage && <ListSkeleton />}
         <div ref={ref}></div>
       </ul>
-      {isFetchingNextPage && <ListSkeleton />}
     </>
   )
 }

diff --git a/src/pages/MainPage/components/InvitedReviewList/index.tsx b/src/pages/MainPage/components/InvitedReviewList/index.tsx
@@ -42,10 +42,9 @@ const InvitedReviewList = ({ handleClickReview }: InvitedReviewListProps) => {
             {...review}
           />
         ))}
-
+        {isFetchingNextPage && <ListSkeleton />}
         <div ref={ref}></div>
       </ul>
-      {isFetchingNextPage && <ListSkeleton />}
     </>
   )
 }

diff --git a/src/pages/MainPage/components/ListSkeleton/index.tsx b/src/pages/MainPage/components/ListSkeleton/index.tsx
@@ -1,11 +1,11 @@
 const ListSkeleton = () => {
   return (
-    <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 md:gap-10">
+    <>
       <li className="skeleton h-36 rounded-md md:h-40"></li>
       <li className="skeleton h-36 rounded-md md:h-40"></li>
       <li className="skeleton h-36 rounded-md md:h-40"></li>
       <li className="skeleton h-36 rounded-md md:h-40"></li>
-    </ul>
+    </>
   )
 }
 

diff --git a/src/pages/MainPage/components/ReceivedReviewList/index.tsx b/src/pages/MainPage/components/ReceivedReviewList/index.tsx
@@ -42,9 +42,9 @@ const ReceivedReviewList = ({ handleClickReview }: ReceivedReviewListProps) => {
             {...review}
           />
         ))}
+        {isFetchingNextPage && <ListSkeleton />}
         <div ref={ref}></div>
       </ul>
-      {isFetchingNextPage && <ListSkeleton />}
     </>
   )
 }

diff --git a/src/pages/MainPage/index.tsx b/src/pages/MainPage/index.tsx
@@ -56,7 +56,13 @@ const MainPage = () => {
           </div>
         </PageIntro>
 
-        <Suspense fallback={<ListSkeleton />}>
+        <Suspense
+          fallback={
+            <ul className="grid grid-cols-2 gap-8 sm:grid-cols-3 md:grid-cols-4 md:gap-10">
+              <ListSkeleton />
+            </ul>
+          }
+        >
           {(() => {
             switch (activeTab) {
               case 'invited':